React Native installation: Diff between create-react-native-app and react-native-cli

-

I am a newbie to React Native and I have just started leaning it. During its installation, came across the following commands

  • npm install -g create-react-native-app
  • npm install -g react-native-cli

It says that the first one is the easiest way to start building a new React Native application, where as the second is from older mode of installation. How these two ways differ from each other? Which one should be selected especially as a beginner like me to learn React Native? Which one is the best way to install React Native?

The create-react-native-app package is a community-driven package that gives you a basic template for React Native so you can start right away instead of having to set up Babel, Expo (which allows for cross-platform development), etc. It's a great way to start with React Native without having to set up any boilerplate or have an Apple machine for iOS projects. It's a CLI that generates a project for you to start without any hassle.

But create-react-native-app has its limitations. The tradeoff is out-of-box ease for less customizability. That's where react-native-cli comes in. This is the CLI that is used to create new pure React Native projects, run them, etc. This does not include Expo which does not allow for the ease with CRNA nor cross-platform development (you'll have to use an Apple machine for iOS). But with a pure React Native project, you can add native libraries and APIs for your project, which is not possible with CRNA. You can achieve a pure React Native project from a CRNA project by ejecting down the line.

I would suggest CRNA as a starting point because it allows you to use Expo to demo your apps on devices quickly and has support for both Android & iOS, regardless if you have Xcode or not -- without any configuration hassle. But it comes with limitations which you can alleviate with ejecting (but will lose other capabilities).

With create-react-native-app, it's easier if you begin with react-native. In fact you don't need (and you can't) work with native code for IOS or ANDROID, Expo for displaying your code on a real or virtual device is good enough. In the future you will be able to 'eject' your project if you need to include some native code (cf react-native documentation).

On the other side, react-native-cli needs to installAndroid environment (for android devices) or/and Ios enviironment (for Ios devices), and you must follow the instructions in react-native documentation for starting your project. After that your only limit will be your imagination :)

If you prefer create-react-native-app is a good training and when you will be comfortable with that you will be able to create real wonderful app with react-native-cli!!

Everything is explained here => https://facebook.github.io/react-native/docs/getting-started

Enjoy!

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

flutter websocket connection issue

-
I am trying to develop a flutter app which connects to the server and exchanges data using websocket. The server is in .Net Core and using Asp.Net Core Websockets to implement this functionality. The problem I am facing is, my flutter app is not able to connect to the server and throws following error. E/flutter (31498): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: E/flutter (31498): WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://127.0.0.1/client#' was not upgraded to websocket E/flutter (31498): #0 new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:83:24) E/flutter (31498): #1 _invokeErrorHandler (dart:async/async_error.dart:13:29) E/flutter (31498): #2 _HandleErrorStream._handleError (dart:async/stream_pipe.dart:286:9) E/flutter (31498): #3 _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:168:13) E/flutter (3149...
Read more