Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Difference between react-native-init and create-react-native-app #516

Closed
ghost opened this issue Dec 22, 2017 · 20 comments
Closed

Difference between react-native-init and create-react-native-app #516

ghost opened this issue Dec 22, 2017 · 20 comments

Comments

@ghost
Copy link

ghost commented Dec 22, 2017

I want to know the Difference between react-native-init and create-react-native-app, I'm new to react native so kindly explain your answer.
I've used both command to create new project, with react-native-init I get a project with iOS & android project folder & with create-react-native-app I get a new project that doesn't has those folders, and running "npm start" project created by react-native-init command doesn't display QR code, why is that, and how can I solve this ?
One more thing what steps should I follow to create android & ios folders in project created by create-react-native-app.
I've read Post-1, Post-2 and Post-3 already.
Apologies If I miss any guidelines in posting the issue, and I know Its not an issue it's just my lack of my knowledge about react-native.

@thidasapankaja
Copy link

thidasapankaja commented Jan 14, 2018

According to React-native official documents

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required

@Benzer1406
Copy link

But using create-react-native-app doesn't allow you to import native modules written in Java and Objetive-C, right?!

@uneeb123
Copy link

Can someone comment on @Benzer1406 question? I am curious to know also.

@EvanBacon
Copy link
Contributor

EvanBacon commented Mar 15, 2018

@Benzer1406 assuming you mean react-native init and not some other lib called react-native-init. Using create-react-native-app creates a project that is bootstrapped with Expo.
Whereas react-native init creates a project that is just react-native,

This means:

  • You have to use xcode and android studio to run your project
  • You won't be able to develop for iOS if you are not on a mac
  • You have to plug your phone in and provision it to run your app - which means it's a pain to share.
  • You can write your own Objective-C and Java (what fun! 🤦🏼‍♀️🙃)
  • If you are using a company computer that runs tasks on ports, you will have to manually change the RN port which isn't fun - you will have to do this every time you pod install or npm install (you will probably do this often)
  • Bugs are pretty tricky to debug, especially with custom code - this means less support 😓
  • You must manually import fonts into your xcode project.
    ... and much more

I would highly recommend using CRNA or exp init as much as possible.


Edit:
Disclaimer: I work at Expo (as is stated in my bio, twitter, instagram, and tinder)

@montao
Copy link

montao commented Mar 16, 2018

I have this problem after ejecting from expo and then trying to build an apk. "Couldn't find index.js" and there is no index.js in the project. The project works well in expo and was created using expo but now I can't make a native build with it because it assumes index.js



C:\Users\datan\go\src\koolbusiness-react-native\android>gradlew assembleRelease

> Configure project :app
Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
WARNING: The specified Android SDK Build Tools version (23.0.1) is ignored, as it is below the minimum supported version (26.0.2) for Android Gradle Plugin 3.0.1.
Android SDK Build Tools 26.0.2 will be used.
To suppress this warning, remove "buildToolsVersion '23.0.1'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

> Task :app:bundleReleaseJsAndAssets
Scanning folders for symlinks in C:\Users\datan\go\src\koolbusiness-react-native\node_modules (151ms)
Scanning folders for symlinks in C:\Users\datan\go\src\koolbusiness-react-native\node_modules (173ms)
Loading dependency graph, done.

Cannot find entry file index.js in any of the roots: ["C:\\Users\\datan\\go\\src\\koolbusiness-react-native"]



FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'cmd'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 10m 20s
12 actionable tasks: 12 executed

C:\Users\datan\go\src\koolbusiness-react-native\androi
```d>

@Benzer1406
Copy link

@EvanBacon Thanks for your list.
However on the other hand it needs to be mentioned that using expo has some disadvantages too:
I tried to to a summary of the most important points: Please refer to https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native/49324689#49324689

React Native init:

Advantages:

  • You can add native modules written in Java/Objective-C (probably the only but the strongest one)

Disadvantages:

  • Needs Android Studio and XCode to run the projects
  • You can't develop for iOS without having a mac
  • Device has to be connected via USB to use it for testing
  • Fonts need to be imported manually in XCode
  • If you want to share the app you need to send the whole .apk / .ipa file
  • Does not provide JS APIs out of the box, e.g. Push-Notifications, Asset Manager, they need to be manually installed and linked with npm for example
  • Setting up a working project properly (inlcuding device configuration) is rather complicated and can take time

Expo

Advantages:

  • Setting up a project is easy and can be done in minutes
  • You (and other people) can open the project while you're working on it
  • Sharing the app is easy (via QR-code or link), you don't have to send the whole .apk or .ipa file
  • No build necessary to run the app
  • Integrates some basic libraries in a standard project (Push Notifications, Asset Manager,...)
  • You can eject it to ExpoKit and integrate native code continuing using some of the Expo features, but not all of them
  • Expo can build .apk and .ipa files (distribution to stores possible with Expo)

Disadvantages:

  • You can't add native modules (probably a gamechanger for some)
  • You can't use libraries that use native code in Objective-C/Java
  • The standard Hello World app is about 25MB big (because of the integrated libraries)
  • If you want to use: FaceDetector, ARKit o Payments you need to eject it to ExpoKit
  • Ejecting it to ExpoKit has a trade-off of features of Expo, e.g. you cannot share via QR code
  • When ejecting to ExpoKit you are limited to the react native version that is supported by ExpoKit at that point in time
  • Debugging in ExpoKit (with native modules) is a lot more complicated, since it mixes two languages and different libraries (no official Expo support anymore)

@EvanBacon Feel free to correct the list if something is not accurate or to add more points

@EvanBacon
Copy link
Contributor

@benzer thanks for a more detailed list. I forgot to mention that expo has this anti-pitch which explains why you might not be interested. https://t.co/yfqFLKS10V

I should also mention that all the gl stuff is far more advanced in expo, things like phaser.js, and pixi.js only work in expo at the moment.

@Benzer1406
Copy link

@EvanBacon having studied a lot now there are still three questions left:

  1. What would be my interest to use a react native project if I can use native code and all Expo APIs in an ExpoKit project? In an ExpoKit project I can still use all Expo APIs and all React Native APIs, right?!

  2. Could I use Expo APIs in a React Native project if I install expo with npm install --save expo?

  3. What is the difference between React Native API and Expo API?

I posted them on StackOverflow: https://stackoverflow.com/questions/49328412/difference-between-expokit-and-react-native-project

@ntiyiso-rikhotso
Copy link

Sorry to jump in,

I also want to understand that how do you create those 2 directories namely android/ and ios/ when used create-react-native-app MyApp ?

Out of the 2 methods react-native init and create-react-native-app MyApp, which one is most advisable/recommendable to use?

@amalan-shenll
Copy link

amalan-shenll commented Apr 28, 2018

When you go for taking apk build you need Android inside project structure, that can be easily added in react-native init or you have to do npm run eject in create-react-native-app to get react-native init folder structure, so react-native init is good for me.

@jonerer
Copy link

jonerer commented May 17, 2018

Since this discussion shows up on google:

Disclamer: @EvanBacon works for expo

@nitinsh99
Copy link

I understand this conversation has been answered and closed, but would someone care to explain the reason why CRNA doesn't work with Native modules? On a deeper level I am trying to understand what is the difference between a React Native module vs a Native module and what's it about a native module that makes it incompatible with CRNA? Thanks

@AaronM04
Copy link

AaronM04 commented Jun 1, 2018

@nitinsh99 I'm by no means an expert, but it appears that Expo relies on your app being pure JavaScript. This limitation may exist to support hot reloading in the Expo app.

@pawarvijay
Copy link

pawarvijay commented Jun 6, 2018

thanks @Benzer1406 .i got cleared , i will not use expo , i will eject , don't want suprises

@Bhavin9898
Copy link

Can i run application without android studio in react-native-init using the SDK. If yes then how?
I have tried but i have not got any success until after the 1 week.

@pawarvijay
Copy link

pawarvijay commented Aug 13, 2018

without android studio you can run react-native https://facebook.github.io/react-native/docs/getting-started.html

@Bhavin9898
Copy link

Bhavin9898 commented Aug 14, 2018

@pawarvijay I have already checked this documentation. There are providing two type of methods.

  1. Method - create-react-native-app AwesomeProject There are we don't use android studio but i don't want use this method because in this method i have to run app using Expo and minimum size of build APK is 25 mb.

  2. Method - react-native init AwesomeProject
    According this method, We need to install android studio so my computer system have enough RAM so please inform me how can i build and run APK using this method without android studio.

@pawarvijay
Copy link

pawarvijay commented Aug 14, 2018

in link https://facebook.github.io/react-native/docs/getting-started.html
There is TAB called Build Project with native code
Then choose development OS
Then choose target OS
Then you will get baby steps to create app

@roshnet
Copy link

roshnet commented Jan 19, 2021

@Bhavin9898 The only reason I don't prefer using Expo, is because I don't want a simple app to weigh 30M.

I'm using react-native init, and so far haven't needed to launch Android Studio.

Just plug-in your device via USB, run react-native start in one terminal, and react-native run-android in another. It runs Gradle and other things for you, so no need for Android Studio unless you're using an emulator.

@brentvatne
Copy link
Member

brentvatne commented Jan 27, 2021

if you don't select any templates, create-react-native-app will create a bare react-native project that lets you use expo modules in it, your app size will be the same as if you initialized with react-native-cli and installed a couple libraries like react-native-gesture-handler and reanimated

this basically saves you the trouble of doing this: https://docs.expo.io/bare/installing-unimodules/ and you can install any of the apis listed here https://docs.expo.io/versions/latest/

if you select a template, you can choose from one of these examples: http://github.com/expo/examples - this will created a managed expo app, but you can just run npm run eject in that project to get the equivalent of what react-native cli would give you.

i hope that clarifies things for people in this thread! locking

@expo expo locked and limited conversation to collaborators Jan 27, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests