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.
Related
What is the proper way to use native module in react native expo bare workflow ?
I want to use react-native-pdf and react-native-blob-util
But I got error :
TypeError: null is not an object (evaluating 'ReactNativeBlobUtil.DocumentDir')
And
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
I have following this link : https://openbase.com/js/react-native-pdf
I read in the expo documentation we can use native module using expo bare workflow. And now my project is bare workflow. In the middle of building my apps using expo bare workflow I got and error when using react-native-pdf and react-native-blob-util
I want when user click the button the apps will open the pdf file which have source link pdf from my server.
Is it possible to setup using this native module in expo bare workflow since bare workflow in the documentation said it like this :
https://docs.expo.dev/introduction/managed-vs-bare/
Bare Workflow
In the bare workflow the developer has complete control, along with
the complexity that comes with that. You can use all packages from the
Expo SDK, development builds, and all Expo and EAS Services.
Configuration with app.json / app.config.js is mostly not supported in
this context; instead, you will need to configure each native project
directly.
Please give me a solution of this problem ? If it is not possible please point me to use another best pdf viewer.
Finally solved the problem.
Native Module cannot run in Expo Go
So expo publish will not working because it is run in Expo Go.
Instead, we must change to run in native. Use case example : npm run android or expo run:android. It will run into bare workflow with native module in our code.
I had this same issue. The fix for me was to rebuild the development client first.
npx expo start --dev-client -c
Then run android/iOS.
There is no need to build with expo run:android.
There was create-react-native-app just like create-react-app
However I see https://github.com/react-community/create-react-native-app has been merged to expo.
Since I need native (android or ios) support, I can do either of theses
expo bare workflow
https://docs.expo.io/versions/v34.0.0/bare/exploring-bare-workflow/
react native init
https://facebook.github.io/react-native/docs/getting-started (react native cli quickstart)
What do I gain by going through expo bare workflow?
If you use Expo, you can use the module in Expo. Of course, Expo needs to install modules for APK availability starting with SDK33. However, you do not need to link the Expo separately.
If you use Expo, it will automatically reload the code when it is refreshed and not restarted, making it easy to see the code change.
And with fast feedback, the development cycle will be faster. Because the process of communicating from simulator to native apps is still slow, build time will be increased when using Web versions that run directly into the browser, until HMR creates a basic framework for the app because it is fast and fully available with Chrome Developer tools.
Also, if you want to install a React-native module that requires a link, you can use the 'expo eject' command to eject Expo. Then you can use React-native.
My Expo-based React Native App works without a problem when run in the Expo tool but gave the following errors when built as an APK to be installed and run standalone.
A series of white screens keep flipping before the blue screen comes up.
Here are my App.JSON and Package.JSON files
Package.json
App.json
And here are the screen capturing the error message.
Actually there are two ways to create a React Native application
create-react-native-app (CRNA)
react-native init
As you stated in comment section, You created your project using CRNA
CRNA will gave you some form of solid project structure, which is really useful for beginners to get started with react native, you code the app with pure javascript and the app will work inside Expo.
Now if you want to take build and run as a standalone apk for android,
There are two methods
You can run command: exp publish:android
You can eject your app from expo
Dont use exp publish for standalone apks,
You can use second method:
To eject your app:
First if you dont use any expo apis inside your apps, it is very easy to eject and build as a stand alone apk.
just do yarn eject
This will gave you some instructions and follow that.
After that your CRNA project structure will be converted into react-native init project structure, now you will be able to see "Android" and "iOS" folders inside your application
To take build Run: connect your phone with USB debugging ON and react-native run android.
That's all.
Solved my own problem. The 'eth-lightwallet' library works perfectly within the Expo development tool but when I build into an APK, it just made the white screen turns up with no meaningful error messages.
The solution is to replace it with a pure web3js implementation.
This may be useful if you are developing a mobile app for Ethereum.
Firstly I created my project with create-react-native-app and I'm developing my app with npm start and I have expo installed on my emulator. How can I convert these project into react native init, I don't want to use expo anymore...I don't neeed any api-es from them...
Thank you
The best resource for this is in the create-react-native-app repository. Try having a look here to get started.
The short answer is to use npm run eject
If you have experience generating signed APKs for Android and code signing with iOS then you shouldn't run into too much trouble.
If you don't, then take the time to go through the Android docs and also this guide should help you get up on running on iOS as well.
Good luck!
Instead of creating your project using the command create-react-native-app, you may create a react native project by following "Building Projects with Native Code" of the getting start guide: https://facebook.github.io/react-native/docs/getting-started.html.
Here you will find out how to:
1. Set up the environment.
2. Installation of phone emulator.
3. Connection of your phone via USB for testing.
4. Create a project using the react-native init command.
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/