I want to create a React web app that may or may not become a native app, and for that I'd like to develop it using React Native for Web. However, I'm not sure what is the best course of action, to keep the native targets a realistic possibility:
Do I use react-native init, then add the web aspects on top of it?
Do I use create-react-native-app and do the same?
Do I use create a webpack based react-native-for-web app and then add ios or android specific features?
Another option is to use create-react-native-web-app
https://www.npmjs.com/package/create-react-native-web-app
$ npm i -g create-react-native-web-app
$ create-react-native-web-app myApp
$ cd myApp
$ npm run web
I've been researching this process for the past week. Here are some options I found that might work for you.
Option 1
There is the react-native-web module which basically allows you to simply code in react-native with web polyfills.
Repo here: https://github.com/necolas/react-native-web
Option 2
There's also a template called re-start you can use which can set you up with a startpoint that will allow you to code in react-native and build Android, iOS, Web, Windows[UWP] and Electron[macOS, Ubuntu, Windows] apps.
Repo here: https://github.com/react-everywhere/re-start
Option 3
If you don't want to use the polyfill option, I actually am working on a build that just simply merges react-native and create-react-app but you have to separate the logic between the 2 platforms yourself.
Repo here: https://github.com/ReyHaynes/react-redux-web-native
Related
I want to use "react-native-health" for the expo and the platform is IOS, and I want to install it on my iPhone is this possible with the expo?
With expo-dev-client you can use react-native-health and continue you to use an expo managed project.
Link: https://docs.expo.dev/development/getting-started/
Once you install react-native-health, you won't be able to use Expo Go anymore since Expo Go will not be able to run react-native-health. In order to test your app you will have to create a custom dev build, as shown in the link above. Once you have done so, you'll be able to easily test and iterate your app just like you would have with Expo Go.
This is a very basic question I'm sure, but i am working in React Native and have no plans on downloading, installing, or using Expo. There is a styling Framework, Nuton, that was built using Expo, My question, is will I be able to use this Framework without having to start an expo project
I cannot find the specific library Nuton you are referring to, please edit your post and add a link to it for a more detailed answer.
However, to give you a basic understanding:
If you have to use "expo install Nuton" in the command line to add this library to your project, then yes, expo is required in order to use this library.
If you can use "npm install Nuton" then no, expo is not required. However, Nuton's package may have expo components it will install within the library itself. Whether you want to use expo or not should not matter in this case.
I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.
I am working on a project already exists native base and I want to add expo to easily test my application.
The easiest way to do this is to make a new Expo project and copy over all the JavaScript from your existing project.
There isn't a way to react-native link expo or anything like that right now. There might be in the future but even then that wouldn't enable the easy sharing that you want. To get that you need to just use the binary code included with Expo (which can do most things you want to do).
Here is more info: https://docs.expo.io/versions/latest/introduction/faq.html#how-do-i-get-my-existing-react-native-project-running-with-expo
Expo can now be added to an existing project, run the following command for automatic installation:
npx install-expo-modules#latest
If the command fails, you can refer to the docs for manual installation instructions.
I literally started reading about ReactNative an hour ago and am reading this git readme https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md
Next I googled about it and found this link which seem to be explaining it but not to me novice in web, react, or react-native
https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md
Can someone explain to me as if I am 2 years old what is the meaning of eject? I keep hearing term "ejected project" but I cannot wrap my head around it.
Summary
If you created an app using create-react-native-app MyApp, ejecting your app gets your app to be the same as if you created your project using react-native init MyApp
aka
create-react-native-app MyApp > make changes to app > eject app
is roughly equivalent to
react-native init MyApp > make changes to app
More Details
What's the difference between create-react-native-app MyApp and react-native init MyApp?
Quick start vs. Full scale development
The philosophy behind create-react-native-app is:
Minimal "Time to Hello World": Create React Native App should reduce the setup time it takes to try building a mobile app to the absolute minimum, ideally on par with React web development (especially as seen with Create React App).
Develop on Your Device: It should be easy to develop on a physical device when you want to test how your app feels and responds to inputs.
One Build Tool: If you just want to get started with React Native, you shouldn't need to install Xcode, Android Studio, NDKs, or mess with environment variables.
No Lock-In: You can always "eject" to your own build setup if you need to write custom native code or modify how your app is built.
Essentially, create-react-native-app lets you get up and running quickly without having to a do a lot of (or any) configuration. In order to do this, it hides a lot of details from you.
If you want to create a serious app, you need to set up a real development environment. You can do this from scratch by running react-native init <project-name>. If you started with a react native project using create-react-native-app, you can get to this same place by "ejecting" your app
More details from the official documentation about getting started with React Native can be found here.
My understanding is that when you run the "create-react-native-app" (or "expo init" now) you are basically adding the Expo library on top of React Native.
I think the main reason for using Expo is to get your app up and running quickly. I think the main reason to eject is that eventually you might need to do more complicated customization with native code and need more control, etc. Here is a better explanation of Expo vs React Native CLI to bootstrap your app:
https://levelup.gitconnected.com/expo-vs-react-native-cli-a-guide-to-bootstrapping-new-react-native-apps-6f0fcafee58f
When you eject you are returning to the same state as if you did not use Expo to setup your app (native ios/android projects will be generated, etc.)
Here are a few other links that helped me understand:
http://www.reactnativeexpress.com/environment
https://docs.expo.io/versions/latest/expokit/eject/