ReactNative Eject Explained - react-native

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/

Related

How to measure react native (Expo) app startup time?

I have an Expo hybrid app (Managed workflow), running on Expo SDK v37 (React Native v0.61).
I'm struggling to find the best way to measure the time it takes from the moment when the user starts the app until the splash screen disappears.
How would you approach this?
PS: I would use Firebase Performance Monitoring instead, if it was available for Expo Managed apps. But it isn't yet.
Basically I see two approaches:
For pure react-native projects you can use react-native-startup-time library.
However I'm not sure, whether you can just add this library and start to use it, since it's required linking.
But in any case you can eject your project and add this library.
If you don't want to eject expo project I can suggest you to update your project to SDK 38. It has support for RN 0.62.2 and flipper integration as well. So you can setup flipper-plugin-react-native-performance and check the performance.
I hope I helped a bit.

ReactNative, What's the benefit of using expo bare workflow?

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.

Expo React-Native App doesn't work when run as a standalone APK

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.

whats the real diff between "create-react-native-app myproject" and "react-native init myproject"

I've recently started react native and following guide on tutorial there are
2 option one is create the project via "create-react-native-app myproject" and other one is "react-native init myproject".
the first one(create-react-native-app) generates app.js only whereas other one generates index.android.js and index.ios.js..
I know somehow they are doing same job but whats the real diffirence here ? which one should I pick to start and when the other one is more usefull over?
The create-react-native-app ("CRNA") CLI builds a project template based on Expo, a third-party toolkit which allows you to write cross-platform React Native applications using only JavaScript, and provides a smoother workflow for getting the app running on a real device. In addition, Expo provides access to tons of native APIs, for which you'd normally need libraries or custom native code.
Expo is great, and in an ideal world, it is what most app developers would probably prefer to use, but Expo's architecture sets an unfortunate limitation: You cannot write custom Native Modules, or integrate third-party libraries which depend on custom native code that isn't build into Expo. This means you have only access to the native functionality provided by React Native and Expo, and cannot easily extend it.
By contrast, the react-native CLI's init command creates a plain React Native app template, with native iOS and Android projects you can modify. The downside of this approach is that you'll need to set up the native iOS and Android build chains on your computer, and it's significantly more cumbersome to get started developing and deploying your app.
Luckily, Expo provides a way to detach a CRNA app from their native app shell. This will convert a CRNA project into something similar to the plain project created by react-native init, but with access to all the Expo SDK functionality.
In practice, the best approach for most beginners and new projects is to start with create-react-native-app, and evaluate whether you'll need to detach later. Expo provides a handy guide to help making that decision.

React Native vs CRNA [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Closed 2 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I want to start with React Native app development and need help to decide on which path I should go.
The main question is: should I go with React Native or create react native app?
From what I understand, CRNA really is react native using the expo client and tools, with a more comfortable use (no dev account required, etc)
I can see the advantages with using CRNA over react native (no being no need to set up dependencies, faster time to start with developing, no need for iPhone dev account or xcode+android combi, etc.)
However, as not all native libraries are included, I see myself in the need to export my app at a later point anyway and continue to work with xcode and Android Studio just like before.
So, if CRNA is just a nice way to get started with everything, then I would go for vanilla react native right away as I see no point in a temporary solution at all.
Also, and maybe you can correct me on this, I do not like the idea to have just another wrapper on top of my app, unless there are some more crucial advantages which I missed out.
So could you please share your experience on this? If you have developed apps with react native in the past, which path did you go and which path will you go in the future? React Native, CRNA or React Native and expo environment?
Hi I will also share some of my experience on the topic.
Since I have a front end background and was not familiar with XCode or Android Studio I've decided to start my native app developement from CRNA.
Indeed with just a text editor, purely with javascript and utilizing built-in expo SDK components I was quickly able to implement and publish to Play Store a fairly simple app.
That I find truly amazing :)
However after publishing the app I realized there are some pitfalls that unable it to compete with similar rival Java apps:
The biggest IMO is the size of the apk generated with exp
service.
For the app with just 3 screens and not a lot business logic, 25 mb and about 60mb after install is really a lot.
According to expo devs more complex apps will be approximately the same size or only slighty larger due to the bulk of the size being the native dependencies, and not actual javascript side.
But this still is a big problem and I will probably have to anyway eject the app to optimze the build size
So in general CRNA is a great and fast way to start and have something working but still before publishing the app to the users you'll not avoid seting up your custom build and all the dependencies like Android Studio
I think create-react-native-app is a good way to start so that you can focus on the React part of react native, especially if you are not familiar with React. And when you are ready to do things with native you can simply eject with npm run eject
When I started a new project with react native late last year, there was no create-react-native-app and I evaluated expo first. I didn’t like it as there were no easy native integration unless you eject when I know for sure we will need native integration. Therefore I went with vanilla react native. Also I already had experience with React on the web and iOS and Android native development.
TLDR
if you create project by create_react_native_app myproject
then it contains expo setting (not recomended )
if you create project by react-native myproject
then its plain react-native (recommended for small ,medium,large to projects )
Note : to use react-native command in terminal use this link
I would like to share my experience of app development . As I was new with react I started with CRNA and it went smoothly . Expo really provides many features like push notification , animations (recommended Lottie by Airbnb) and peace of mind that you can eject your app anytime you want to use native libraries with app . Best part is you don't have to rewrite any code and all expo exclusive features will work as well .
Therefore CRNA(use as much you can)+eject(when you need native libraries) = sweet spot .