React NativeKnown Issues # | Edit on GitHub |
Devtools "React" Tab Does Not Work #
It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.
However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the ⚙debuggerWorker.js entry in the devtools dropdown that by default is set to <top frame>.
Missing Android Modules and Views #
The work on React Native for Android started later than React Native for iOS. Most views and modules are now available on Android, with the following exceptions:
Views #
- Maps - Please use Leland Richardson's react-native-maps as it is more feature-complete than our internal implementation.
- Android Slider (also known as SeekBar)
Modules #
- Android Push Notifications - Please use a 3rd party module.
Some props are only supported on one platform #
There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with @platform in JS docs and have a small badge next to them on the website. See e.g. Image.
Platform parity #
There are known cases where the APIs could be made more consistent across iOS and Android:
<ViewPagerAndroid>and<ScrollView pagingEnabled={true}>on iOS do a similar thing. We might want to unify them to<ViewPager>.ActivityIndicatorcould render a native spinning indicator on both platforms (currently this is done usingActivityIndicatorIOSon iOS andProgressBarAndroidon Android).ProgressBarcould render a horizontal progress bar on both platforms (on iOS this isProgressViewIOS, on Android it'sProgressBarAndroid).
The overflow style property defaults to hidden and cannot be changed on Android #
This is a result of how Android rendering works. This feature is not being worked on as it would be a significant undertaking and there are many more important tasks.
Another issue with overflow: 'hidden' on Android: a view is not clipped by the parent's borderRadius even if the parent has overflow: 'hidden' enabled – the corners of the inner view will be visible outside of the rounded corners. This is only on Android; it works as expected on iOS. See a demo of the bug and the corresponding issue.
View shadows #
The shadow* view styles apply on iOS, and the elevation view prop is available on Android. Setting elevation on Android is equivalent to using the native elevation API, and has the same limitations (most significantly, it only works on Android 5.0+). Setting elevation on Android also affects the z-order for overlapping views.
Android M permissions #
The open source version of React Native doesn't yet support the Android M permission model.
Layout-only nodes on Android #
An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set collapsable to false as in this example:
Known Issues # | Edit on GitHub |
Devtools "React" Tab Does Not Work #
It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.
However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the ⚙debuggerWorker.js entry in the devtools dropdown that by default is set to <top frame>.
Missing Android Modules and Views #
The work on React Native for Android started later than React Native for iOS. Most views and modules are now available on Android, with the following exceptions:
Views #
- Maps - Please use Leland Richardson's react-native-maps as it is more feature-complete than our internal implementation.
Modules #
- Android Push Notifications - Please use a 3rd party module.
Some props are only supported on one platform #
There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with @platform in JS docs and have a small badge next to them on the website. See e.g. Image.
Platform parity #
There are known cases where the APIs could be made more consistent across iOS and Android:
<ViewPagerAndroid>and<ScrollView pagingEnabled={true}>on iOS do a similar thing. We might want to unify them to<ViewPager>.ActivityIndicatorcould render a native spinning indicator on both platforms (currently this is done usingActivityIndicatorIOSon iOS andProgressBarAndroidon Android).ProgressBarcould render a horizontal progress bar on both platforms (on iOS this isProgressViewIOS, on Android it'sProgressBarAndroid).
The overflow style property defaults to hidden and cannot be changed on Android #
This is a result of how Android rendering works. This feature is not being worked on as it would be a significant undertaking and there are many more important tasks.
Another issue with overflow: 'hidden' on Android: a view is not clipped by the parent's borderRadius even if the parent has overflow: 'hidden' enabled – the corners of the inner view will be visible outside of the rounded corners. This is only on Android; it works as expected on iOS. See a demo of the bug and the corresponding issue.
View shadows #
The shadow* view styles apply on iOS, and the elevation view prop is available on Android. Setting elevation on Android is equivalent to using the native elevation API, and has the same limitations (most significantly, it only works on Android 5.0+). Setting elevation on Android also affects the z-order for overlapping views.
Android M permissions #
The open source version of React Native doesn't yet support the Android M permission model.
Layout-only nodes on Android #
An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set collapsable to false as in this example:
Memory issues with PNG images #
React Native Android depends on Fresco for loading and displaying images. Currently we have disabled downsampling because it is experimental, so you may run into memory issues when loading large PNG images.
react-native init hangs #
Try running react-native init with --verbose and see #2797 for common causes.
Text Input Border #
The text input has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.
Tutorial # | Edit on GitHub |
Preface #
This tutorial aims to get you up to speed with writing iOS and Android apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.
We assume you have experience writing applications with React. If not, you can learn about it on the React website.
Setup #
React Native requires the basic setup explained at React Native Getting Started.
After installing these dependencies there are two simple commands to get a React Native project all set up for development.
npm install -g react-native-clireact-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install
react-nativeas a command in your terminal. You only ever need to do this once.react-native init AwesomeProjectThis command fetches the React Native source code and dependencies and then creates a new Xcode project in
AwesomeProject/iOS/AwesomeProject.xcodeprojand a gradle project inAwesomeProject/android/app.
Overview #
In this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.
Starting the app on iOS #
Open this new project (AwesomeProject/ios/AwesomeProject.xcodeproj) in Xcode and simply build and run it with ⌘+R. Doing so will also start a Node server which enables live code reloading. With this you can see your changes by pressing ⌘+R in the simulator rather than recompiling in Xcode.
Starting the app on Android #
In your terminal navigate into the AwesomeProject and run:
This will install the generated app on your emulator or device, as well as start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press Reload JS.
Hello World #
react-native init will generate an app with the name of your project, in this case AwesomeProject. This is a simple hello world app. For iOS, you can edit index.ios.js to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit index.android.js to make changes to the app and press Reload JS from the rage shake menu to see the changes.
Mocking data #
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the imports, but feel free to add the following constant wherever you like. In index.ios.js or index.android.js :
Tutorial # | Edit on GitHub |
Preface #
This tutorial aims to get you up to speed with writing iOS and Android apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.
We assume you have experience writing applications with React. If not, you can learn about it on the React website.
Building a real-world app #
This tutorial explains how to build a simple app to get you started. If you're looking for a more advanced tutorial on building a real-world app, check out makeitopen.com.
Setup #
React Native requires the basic setup explained at React Native Getting Started.
After installing these dependencies there are two simple commands to get a React Native project all set up for development.
npm install -g react-native-clireact-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install
react-nativeas a command in your terminal. You only ever need to do this once.react-native init AwesomeProjectThis command fetches the React Native source code and dependencies and then creates a new Xcode project in
AwesomeProject/iOS/AwesomeProject.xcodeprojand a gradle project inAwesomeProject/android/app.
Overview #
In this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.
Starting the app on iOS #
Open this new project (AwesomeProject/ios/AwesomeProject.xcodeproj) in Xcode and simply build and run it with ⌘+R. Doing so will also start a Node server which enables live code reloading. With this you can see your changes by pressing ⌘+R in the simulator rather than recompiling in Xcode.
Starting the app on Android #
In your terminal navigate into the AwesomeProject and run:
This will install the generated app on your emulator or device, as well as start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press Reload JS.
Hello World #
react-native init will generate an app with the name of your project, in this case AwesomeProject. This is a simple hello world app. For iOS, you can edit index.ios.js to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit index.android.js to make changes to the app and press Reload JS from the rage shake menu to see the changes.
Mocking data #
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the imports, but feel free to add the following constant wherever you like. In index.ios.js or index.android.js :
Render a movie #
We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React imports below.