I've got a React Native project that was recently upgraded to RN 0.56.
This is fine for the Mac users, but 0.56 is broken on Windows.
Since it's specifically the Metro bundler that seems to be the issue, I was wondering whether there was any way to run my project locally in something like Snack?
You can import a public git repository or javascript files. You can also export a project. All the import/export options are accessible from the project menu (as shown in the image below):
Given the age of this question and the lack of responses, I'm inferring that the answer is "no".
For any future explorers, it might be helpful to know that I searched pretty exhaustively for a way to make this work, without success.
In the end, RN 0.57 fixed Windows support, so this became a non-issue for me.
Related
I'm getting this error when opening VS Code. Does anyone know what it means? I've done some research but didn't get any relevant information :(
I've tried creating a workflow to see if the error disappeared, but it didn't.
It seems that react native is asking for a workspace to start but is it asking that in the first place? Can I disable react native from running when opening VS Code?
The folder opened when the screenshot above was taken was the folder it opens by default, I believe it's the mac "home" personal folder, and I have a folder called "git" inside of it, with all projects.
Given the date of this posting (2023-02-07), you're probably on version 1.10.0 of the extension. This sounds like this bug report in the microsoft/vscode-react-native GitHub repo: [Bug] Extension activating when it shouldn't #1891.
A fix is coming in version 1.10.1.
But it is taking some time and has not been release yet at the time of this writing 2023-01-31:
we're facing some problems in the last release process, recently we're waiting for new publishing PAT access to republish 1.10.1 again, maybe it will publish on marketplace on next week. We have nightly version for extension in marketplace as well, maybe you can use it now.
For now, you can try installing the nightly version.
Also, note from the extension's readme documentation:
Before going any further make sure that you:
have a working React Native environment.
have the emulator utility available in your PATH if you're developing Android applications.
[...]
Got it, this annoying log came from React Native Tools extension. They specify the requirements in the docs:
In my case, I don't have a specific React Native environment or the emulator PATH is not right.
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 🎉
I used to see lots of articles about native modules inside RN apps, but very few about RN inside native project. Let's say we have a project, in which we want to add a single screen fully developed using RN. As far as i know, instagram have something like this. I have read official documentation about this, but it left too many questions. Does anybody know the good step-by-step implementation guide?
Mostly, i'm interested in:
What is the structure. Do i really need to move all the project inside /ios and /android folder, wrapping the whole project? What if the project have separate repositories for both platforms?
Do native developers need to install node environment in order to continue working on the project, installing node_modules and staff?
How much is the influence on the app size?
UPDATE: 07.20.2021
I'm still not able to run an RN screen inside native projects. The docs i told about before doesn't contain actual info, steps are not properly described, and even writing exactly as they told, the project still cannot run and crash as fast as i change activity to RN one.
Here are some points related to the questions that you have which might help you.
No, You don't need to move the whole native code to the /android and /ios directory.
Yes if you are about to open the RN screen from the native app you should have set up the react-native environment properly.
The app size might increase as there is a bridge created with javascript and native code. but you should have a choice to upload the .aab bundle file which helps you to provide the platform-specific builds to the users.
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.
will react native be supported by windows os?Or linux . I don't own a mac so i was wondering if facebook plans to release react native for windows or linux. i don't want to run virtual machine because it's too much of a hassle.
I had successfully run the react-native on windows with a few hack.
The gist is here gist
Windows support would be awesome but cannot promise an ETA. We'd be happy to review pull requests that will make the CLI work on Windows.
You could skip the CLI and start with the Sample app from examples, build it with Gradle and start the packager manually using node node_modules/react-native/packager/packager.js.
Discussion here: https://github.com/facebook/react-native/issues/2693
This is not official support but I figured out how to get things working on Windows in a way that allows you to use the react-native CLI as documented without having to modify the source code.
The main issue that I encountered was with the hardcoded references to sh in React Native's packager. I solved this by adding Cygwin's bin directory to my path. Others have provided solutions for this where they modify the source code to work on Windows but I'd prefer not to go that route in order to ease updating to newer versions of React Native.
The other two catches where having to enable virtualization in my BIOS in order to get HAXM support and having to load the debugger page manually.
I wrote up some notes on the complete process here and intend to keep this up to date with future release of React Native:
http://davidanderson.io/2015/10/18/a-step-by-step-guide-to-react-native-on-windows/