React Native Tutorial
- React Native Tutorial
- React Native Environment Setups
- React Native First Application Hello World
- React Native View
- React Native State
- React Native Props
- React Native Style
- React Native Height and Width
- React Native Button
- React Native Layout and Flexbox
- React Native Positioning Element with Flex
- React Native ScrollView
- React Native ListView
- React Native FlatList
- React Native SectionList
- React Native Touchables
- React Native Text Input
- React Native ActivityIndicator
- React Native Picker
- React Native StatusBar
- React Native Switch
- React Native WebView
- React Native ProgressBarAndroid
- React Native ProgressBar With Animated
Navigation
- React Native Navigation
- React Native Configuring Header Bar
- React Native Moving Between Screens
- React Native Passing Value between Screen
- React Native Tab Navigation
- React Native Adding Icons at the Bottom of Tab Navigation
- React Native Create Material Bottom Tab Navigator
- React Native Top Tab Navigator
- React Native Drawer Navigation
Storage
React Misc
- React Native Google Map
- React Native Modal
- React Native Vector Icons
- React Native Splash Screen
- React Native vs. Ionic
- React Native vs. Xamarin
- React Native vs Flutter
- React Native vs React
- React Native vs Swift
- Box shadow in React Native
- React Native IAP
- React-Native Localization
- React Native Toast
- React Native Sound
React Native vs Flutter
React Native
React Native is the mobile app development framework, which is developed by Facebook. It is an open-source tool which is released in 2015. Using React Native, we can build iOS and Android applications. React Native utilizes the JavaScript and React. React Native is primarily used by Facebook, Airbnb, Instagram, and many more.
Development
React Native uses the set of components which is provided by the react-native library for mobile app development. React Native uses the virtual DOM, but it does not manipulate a DOM. It uses DOM to communicate with the native UI elements.
Starting React Native is an easy task. We can start it with installing the create-react-native-app package with npm install. React Native app development is a cool thing, and it provides an Expo integration. The Expo facilitates to run your code on your mobile device.
Performance
React Native compile approach is different than Flutter. The complete application does not compile to C/C++ or native language. The only the UI components are compiled to their native equivalents, and JS runs in a separate thread.
Flutter
Flutter is a reactive cross-platform mobile development framework which uses the Dart language. Flutter and Dart are created by Google. They are using the framework for some of its most significant application. This framework pushes towards the ultimate solution for building cross-platform apps. The Flutter initially releases its alpha version in May 2017, which is much later than React Native.
Reactive Programming with Flutter
Flutter is a reactive framework which a powerful and useful, especially in the app development. Let's illustrate it with an example: suppose you want to send a request to a server and want to do something depending on its response. If you act before the response is back, i.e. before you have an object will result in a bit mistake, a null reference.
It becomes out of control if your data coming asynchronously and many parts of the program need to respond to the incoming data. This problem gave birth to a paradigm in programming known as reactive programming.
Development
Widget is the main building block of the Flutter application. These are analogous to the component in React Native. Flutter comes with the ready-to-use widget, which uses the material design concepts. There are two types of widgets, these are stateful widgets, and stateless widgets just like function and class component in React.
Flutter widgets are not adaptive, so we have to make the platform-specific adaptation manually.
Flutter supports the Hot-Reload features, which enable the rerun of the application. It speed-up application development. It currently supports on IntelliJ Idea, Visual Studio Code, and Android Studio.
Performance
When we talk about the performance, Flutter's approach is quite different than the React Native, or even NativeScript. The Flutter applications are compiled using arm C/C++ library so that it is near to machine language and gives better performance.
React Native vs Flutter Summary
Technology | React Native | Flutter |
---|---|---|
Created By | ||
Programming Language | JavaScript | Dart |
Hot Reload | Supported | Supported |
Main Architecture | Flux and Redux | BLoC |
Components Library | Large inclusive library | Smaller, non-inclusive |
Adaptive Components | Some components are adapted automatically. | Components are not adapted. They need to be configured manually. |
Ecosystem | It is quite mature and used in production in many big companies around the world. | It is not yet mature. |
Github Stars | 68690 | 37,200 |
First Release | Jan 2015 | May 2017 |