Facebook for data driven web interfaces. The key point with React Native is that it aims to primarily bring the power of the React programming model to mobile app development. React Native is like React, but it uses native components instead of web components as building blocks. • Started as Facebook’s internal hackathon project, in the summer of 2013 • The first public preview was in January of 2015 at React.js Con. • Supportted minimum SDK versions: Android 4.1 (API 16) and iOS 8.0
have a productive debug loop, including inspection, watches, setting breakpoints, step in/over/out, etc. • Build upon Chrome Developer Tools • (For me) far behind the native development IDEs
Run on Android. Every time a source file was saved, the changes were deployed immediately on the device where the app was running, thus greatly expediting the feedback loop.
solely in JavaScript, native code is needed for: • push notifications • deep linking • native UI components that need to be exposed to React Overall approximately 80% of the code is shared between iOS and Android and written in JavaScript.
Android, Objective C on iOS). The communication occurs through the so-called "bridge". If at any time you feel that this communication slows things down too much, you can choose to implement the Javascript functionality in Java or Objective C in order to run purely native. In this case, you are writing directly in native code, so there's no Javascript to native compilation. Does the JS code compiled to native code?
• You can access previous state inside the setState function • Unlike Props, State is mutable • Each of the prop and state change triggers a complete re-render of the component State export default class MyContainerComponent extends Component { constructor() { super() this.state = { myText: 'Lorem ipsum dolor sit amet.' } } render() { return ( <View> <Text> { this.state.myText } </Text> </View> ); } }
API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript. It is possible to write real native code and have access to the full power of the platform.
2. Override getName() method to return unique name 3. (Optional) override getConstants() 4. Add your native methods and annotate them with @ReactMethod 5. Register your module inside your ReactPackage class 6. Access your native method from JS using the name you defined in getName()
ToastAndroid module as a JS module. This has a * function 'show' which takes the following parameters: * * 1. String message: A string with the text to toast * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or * ToastAndroid.LONG */ import { NativeModules } from 'react-native'; module.exports = NativeModules.ToastAndroid; import ToastAndroid from './ToastAndroid'; ToastAndroid.show('Awesome', ToastAndroid.SHORT);
your device and release an update without the work of putting the app on stores. Allowing your app to update without deploying to the app store, Code Push allows you to change the UI/UX, business logic fix bugs, load hot-fixes. • Cannot push any code touching the native side of React Native • Rollback support • Supported by iOS 8+ and Android 4.1+
for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale. Flow checks your code for errors through static type annotations. • Open Source and maintained by Facebook
code shared between the apps for some of the Instagram products, which could be used as a proxy to measure how we managed to improve developer velocity: • Post Promote: 99% • SMS Captcha Checkpoint: 97% • Comment Moderation: 85% • Lead Gen Ads: 87% • Push Notification Settings: 92%
is the ability to push quick bug fixes over-the-air, bypassing app stores, which means the React Native JavaScript bundle will be hosted on a server and retrieved by the client directly, similar to how the web works. Tools like Microsoft CodePush can be used to map bundles to the correct app versions. But supporting multiple versions of the app at the same time is an overhead that should be considered when deciding to use React Native.
and maintained by Facebook. It has 2 weeks of release cycle and under heavy development. The open source community is fantastic about developing and releasing new features and performance tweaks. But upgrading your React Native version tends to be a massive pain, especially if you have a platform built around React Native.
between the functionality of React Native on iOS and on Android to make it tricky to support both platforms. For example, the style property “overflow” is supported on iOS but not Android. In the React Native documentation you can see many properties and features marked as “Android only” or “iOS only”.
debug mode vs regular mode due to the fact that React Native utilizes a different JavaScript engine for each of these two modes. When a bug is particular to regular mode, it can naturally be hard to debug because it’s irreproducible in debug mode.
the React Native is very dependent to the platform. If Facebook stops maintaining React Native, your app’s development will stop and you will be considering a React Native replacement for your app. Facebook hasn’t made any long-term commitments to maintaining React Native for a sustained period of time.
Your app is built on more than 600 people’s sustained efforts. This is also a pitfall: you depend on 648 volunteers to keep maintaining their library for the lifetime of your app, without any formal commitment. Will their licenses stay compatible with your software? Hopefully.
good use case for React Native can be found in applications that need short time support, for example an app for a one-shot event like a concert or a conference. However after our month-long investigation we can definitively say that React Native is not a mature or stable platform yet. For this reason, we think that React Native is not ready to be used in a long-lasting supported application. React Native seems to be suitable for apps with simple UI, simple animations, and not long life or performance-critical apps.” - Novoda Blog, July 5th 2016
prototyping and a very high initial velocity. Basic features are relatively easy to implement. If needed, they can be extended with native code and native views, and also integrate well with other view controllers. But with all the pros, there are some cons, too. It’s natural that JavaScript code is not as efficient for calculation-intensive tasks, and there is an overhead when JavaScript is controlling native elements. JavaScript has a single dedicated device thread, while native code is free to use whatever threads it wants. In performance, React Native stays behind an optimized native application.” - DevBridge Group, April 28th 2016
Native Docs • Why I'm not a React Native Developer • React Native at Airbnb • React Native at Instagram • React Native: Is it the end of native development? • React-Native Stack 2017