Has anyone been able to get React-Native 0.7, React-Native-Web and React-Navigation/Stack 6.2.3 to work on web? I have a small app working on iOS and Android which I am trying to enable on web too. iOS and Android portion work fine and using metro.
However, webpack build continues to error out with "Module parse failed: Unexpected token" on the NavigationContainer.
I tried searching both react-native-web and react-navigation Issues on their respective GitHub Repositories. However, could not find something to solve my issue. Also tried modifying webpack.config with several different configurations/loaders.
Used links below as a reference too:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
https://gist.github.com/skabbes/0bfa0a969aac8ec13f716dda1ad2ab43
Yes, it happens that I maintain a library that does just that: creates a bare React Native app that also runs on the web: 🌒 Luna - https://github.com/criszz77/luna
Here is the live example: https://criszz77.github.io/luna/
You can find more on the wiki page about how it's implemented and you can also implement it by yourself: https://github.com/criszz77/luna/wiki
By using react-scripts, you don't have to handle webpack, babel and other hard configs by yourself.
It currently doesn't run on 0.7 (didn't have time to make the update), but it's in plan to support all the latest versions of course ASAP.
EDIT: Updated to 0.70.3 🎉
Related
Currently, my project running on the 0.66.3 version I need to upgrade to react native version 0.70.6. So I have used to following command
npx react-native upgrade
After running this command showing some error I have attached a screenshot please refer.
I am also trying the manual way using react native helper but some files are not available in my project.
so anyone please tell me how I will upgrade my project version?
After Run npx react-native run-android my build was created successfully but 3 errors showing in the metro bundler. I have attached a screenshot of the metro bundler error.
you can specify a React Native version and pass it as an argument:
npx react-native upgrade 0.70.6
you can also refer this official documentation for this
& it will also helps you if you got any error.
https://reactnative.dev/docs/upgrading
I found by changing react-native - index.js and react-native/Libraries/Text - index.js
Follow this link for output:
https://github.com/facebook/react-native/commit/3f629049ba9773793978cf9093c7a71af15e3e8d
Don't know whether it is the right way or not....
Since upgrading an application can break functionality in your app if you do not know what is needed to be changed. the upgrade is tells you to visit the pages to go through and see what has changed throughout the upgrading process.
Other as that I am just needing more information regarding to what is not working. Since upgrading is more as just running a command, its about reading the documentation and see what part is missing and what they replaced the files with. The missing files could be straight-out deprecated and not working with the new version.
As always check the debugger and read every message throughout and visit all links given and see the documentation regarding the upgrade differences, find out if there are any log files you could look at, and talk with people in your company / group of react-native about this.
"Some files are not available in my project"
This part might just be able to google and see if this is still supported or not in the version it could be phased out, or not supported in the version. that's where versioning comes in to play.
I am unsure what files and which libraries are deprecated based on your Opening Post, this needs more information, to help us, help you.
installed 'npm install react-native-heremaps --save'
This is for react-native init android, I tried some application using ios concept.
Error
Loading dependency graph, done. Error: Unable to resolve module ./index
Referrence:
Github ios sample
this question is a bit vague for SO, something that would require an entire course to answer. Currently it looks like you should learn how to do react-native android before attempting to add on top HERE. There are many great tutorials to get that started and working.
For the here portion you will have to use the Here-Maps-SDK. Since there isn't a react version of this SDK, you will need to link it using a react bridge.
It's not that easy of a process, and will take a decent amount of work to get right.
Here are some examples to help get started: https://hackernoon.com/react-native-bridge-for-ios-and-android-43feb9712fcb
https://facebook.github.io/react-native/docs/native-modules-ios
I want to create my own podcast app.
I found this pre-written code online (github.com/diego3g/rocketcasts) and want to tweak it in order to create my own app.
How do I upload this code into expo?
Unfortunately that React-Native app was not built using Expo. You can tell because it has ios and android folders in its root directory.
Digging deeper you can see that it uses react-native-config as a dependency. This dependency requires access to native code, which Expo does not allow. You would have to go through and remove any dependency that requires native code if you wish to use Expo. This may remove functionality and could take some time to resolve issues.
Also this application was built using react-native: 0.47.2. Currently the most recent version of react-native is 0.57.8 with 0.58.0 just around the corner. That is quite a jump to make if you plan on upgrading the react-native version. Upgrading RN is not as simple as just changing a version code.
Similarly the repos last commit was over a year ago. That means that the majority of dependencies will be out of date and will need upgraded. Again, some dependencies aren’t a simple upgrade you would need to check every single one to make sure that it doesn’t cause unforeseen problems. You would also need to check their compatibility with Expo.
Personally I wouldn’t copy the project. I would look at how they have implemented the functionality and then in a new react-native project I would re-implement the functionality. That way all dependencies would be up to date and you would know that it would work.
Going down the path of editing an existing project like this one may be quite a challenge.
Either way good luck.
You can find more information about Expo here https://docs.expo.io/
And you can find a good explanation of the differences between Expo and react-native init here What is the difference between Expo and React Native?
The standard way to tweak an existing GitHub repository you don't own is to:
fork the repo (that is a GitHub operation, creating a copy of the repo in your account)
clone it and modify it: you can then push back to your GitHub fork.
I'm learning React Native and trying to add a component to an Expo Snack for testing. I can't even get the example app to work though.
Is it something different about how Snacks work vs. a desktop development environment? I've encountered that type of difference using JSFiddle, for example.
I straight copy-pasted the code from the Github repo into snack.expo.io and it gave me an error:
Device: (946:881) Unable to resolve module 'module://expo-font.js'
Evaluating module://expo-font.js
Evaluating module://react-native-numeric-input.js
Evaluating module://App.js
Loading module://App.js
I've gotten this error before, but I've never been able to figure out why. Is it an issue with the package, which was updated just 7 days ago, or something else? Please advise.
It may be due to missing of node modules in your project compared to the Github project. As the Stack.expo browser won't give us full freedom to install custom modules, I suggest you to download VS Code and open the Github project in it, then do "npm install" from cmd and "react-native run-android/ios".
Is there a recent Webpack HMR react-native boilerplate out there?
I am having trouble finding a best practice for integrating an existing setup with Webpack and HMR to be used with react-native and the react-native packager. The resources I found online on this topic are dated.
I know that it uses Facebook's watchman.
I also know of the webpack-watchman-plugin, but I don't think that will allow me to trigger a webpack build and serve the compiled assets to react-native. I know that watchman has -- trigger functionality, but don't think digging in the packager local CLI is the answer either.
I'm at a loss for finding decent documentation for Facebook's packager, and not sure where to get started on this. My goal is to take an existing boilerplate used for web React, and use the boilerplate setup for react-native. I understand about the rendering differences, this is mostly the build tool part.
I've resolved this issue by not trying to integrate webpack with react-native, but by not using webpack at all and using react-native's packager. Still working on it, but I like it so far! Using it for my Open-Source react-native boilerplate project, strangeluv-native