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.
Related
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.
I created a RN with create-react-native-app, and I have now decided to eject. It didn't work initially, and required some packages to be installed (#babel/...), but now, it complains that Module 'expo' does not exist in the Haste module map.
Why does it still require expo, now that it has been ejected? Or have I misunderstood what ejection does?
N.B. during the ejection I chose the option to eject to an RN app, not to ExpoKit. This is on iOS, currently.
When ejecting expo app you'll be asked about using expo-kit or just react-native and it's up to you to choose, plus Module 'expo' does not exist in the Haste module map means you still using expo in your code so double check your code to be sure that you're not importing expo anywhere and try again.
TL;DR
Ejected expo react native app requires expo? the short answer is no.
when using expo app you have the ability to build your app using the expo server so you don't have to have Android Studio or XCode installed all you have to do is $ expo build:[android|ios] and download your built package after the build process is done also you can run your app using expo client app on Android and Ios but once ejecting you'll lose the ability of using expo server as your build environment instead you have to use Android Studio or XCode, but the main difference here is when you choose expo-kit you still have the ability of using expo client to run your app and you still have the ability to use expo modules inside your code but when you choose react-native you can't use expo client instead you have to use the native tools, anyway in all cases once you eject your project you have to build it yourself and you can't undo this step.
Sidenote
You can build very powerful apps using only JavaScript without any need to eject especially when using `expo SDK 31+, I'm working on an app now with features like detecting location, live maps, social login and chat and I don't need to eject it at all.
Please take a look here and here
Update:
One last thing you have to remember is that when using expo or expo-kit you can keep developing ios app on any OS but when using react-native you can't do this you MUST have a mac.
I have been using react native for a couple months now. However, I really don't know the difference between the starting commands. Currently, I use npm on my project. However, I know yarn can be used. These are the commands I really don't understand the difference with:
exp start, exp ios, exp android
react-native run-ios, react-native run-android
npm start, npm ios, npm android
Which ones are better in what cases and why? Currently, I am using exp but others use react-native run-ios. I used to use npm ios.
Thank you in advance.
It might help to have an overview of the React Native architecture.
In react native, when you write, say, <View/>, it gets sent across the bridge to the native code and dynamically translated into UIView on iOS or android.view.View on Android. Every basic component in the react-native package has been implemented this way. If you want additional native functionality on both platforms, say a library which uses native map components, you will end up having to include the native libraries separately into your Android build.gradle and your iOS .xcodeproj.
The exp CLI is used to start apps built with the Expo SDK. Expo is essentially a prebuilt app with a certain set of native components already included for convenience; all you supply is your JSX; thus the recommendation to "eject" to a regular react native app if you need to use any other libraries.
react-native run-ios and run-android builds the native .app or .apk using the iOS or Android toolchains, starts the Metro Bundler, which minifies and serves the JSX and other assets such as images over to your device in debug mode (You might see something like Loading from localhost:8081).
On Android, it starts the adb server to push the APK with all the native libraries included onto your device, if you have USB debugging enabled. run-ios does the same with the .app; if you install to a simulator it has automatically configured AppDelegate.m to communicate with localhost:8081, whereas live reload over USB has to be configured manually on a physical device.
react-native start simply starts the Metro bundler, which is useful if you already have the app installed.
Commands that begin with npm are defined as scripts in your package.json file. As of RN 0.57, npm start simply calls node node_modules/react-native/local-cli/cli.js start; which is the same as running react-native start; according to the docs react-native-cli installed separately will call the locally installed version of the CLI in node_modules.
I have build an app using react native(detached) but the thing is I would want to completely get rid of Expo. The reason is, what if one day EXPO service get shut down or no more supported.
So in this case I would not want the app to be affected.
Currently I need to publish my app thru ExpoKit to see the latest changes, how would I build my android app so it would not have any reference to Expo but still be able to work properly
Currently this is how I understand how the react native and expo works: first u build ur app using react native code and then a bundle.js is generated somewhere on cloud(EXPO) using publish command so the app communicate with that bundle.js.
Note I am not using any feature from Expo so why would I need Expo in this case?
Edited: If I am detaching my app from expo, I mean why would I still need Expo? Can't I just build the app and run the app without expo at all?
You can build your whole application without using expo, just follow the steps from facebook documentation in "Building Projects with Native Code" tab.
or
you can run "npm run eject" in your project root directory folder.
After this, you can build your appliaction using react-native cli commands, like
react-native run-android.
edited :--
For building apk for production, you can follow steps given in facebook documentation as generating signed apk and for released IPA for iOS yo can follow building your app for production for IOS.
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/