React NativeAccessibility # | Edit on GitHub |
Native App Accessibility (iOS and Android) #
Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.
Making Apps Accessible #
Accessibility properties #
accessible (iOS, Android) #
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
Accessibility # | Edit on GitHub |
Native App Accessibility (iOS and Android) #
Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.
Making Apps Accessible #
Accessibility properties #
accessible (iOS, Android) #
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
accessibilityLabel (iOS, Android) #
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View:
ActionSheetIOS # | Edit on GitHub |
Methods #
static showActionSheetWithOptions(options: Object, callback: Function) #
Display an iOS action sheet. The options object must contain one or more
-of:
options(array of strings) - a list of button titles (required)cancelButtonIndex(int) - index of cancel button inoptionsdestructiveButtonIndex(int) - index of destructive button inoptionstitle(string) - a title to show above the action sheetmessage(string) - a message to show below the title
static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function) #
Display the iOS share sheet. The options object should contain
+
ActionSheetIOS # | Edit on GitHub |
Methods #
static showActionSheetWithOptions(options, callback) #
Display an iOS action sheet. The options object must contain one or more
+of:
options(array of strings) - a list of button titles (required)cancelButtonIndex(int) - index of cancel button inoptionsdestructiveButtonIndex(int) - index of destructive button inoptionstitle(string) - a title to show above the action sheetmessage(string) - a message to show below the title
static showShareActionSheetWithOptions(options, failureCallback, successCallback) #
Display the iOS share sheet. The options object should contain
one or both of:
message(string) - a message to shareurl(string) - a URL to share
NOTE: if url points to a local file, or is a base64-encoded
uri, the file it points to will be loaded and shared directly.
In this way, you can share images, videos, PDF files, etc.
Examples # | Edit on GitHub |
ActivityIndicatorIOS # | Edit on GitHub |
Props #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
color string #
The foreground color of the spinner (default is gray).
hidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36.
Examples # | Edit on GitHub |
ActivityIndicatorIOS # | Edit on GitHub |
Props #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
color string #
The foreground color of the spinner (default is gray).
hidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36.
Examples # | Edit on GitHub |
Alert # | Edit on GitHub |
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the +
Alert # | Edit on GitHub |
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, @@ -13,16 +13,17 @@ of a neutral, negative and a positive button:
- If you specify one butt {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ] -)
Methods #
static alert(title: string, message?: string, buttons?: Buttons, type?: AlertType) #
Examples # | Edit on GitHub |
Methods #
static alert(title, message?, buttons?, type?) #
Examples # | Edit on GitHub |
AlertIOS # | Edit on GitHub |
The AlertsIOS utility provides two functions: alert and prompt. All
+
AlertIOS # | Edit on GitHub |
The AlertsIOS utility provides two functions: alert and prompt. All
functionality available through AlertIOS.alert is also available in the
cross-platform Alert.alert, which we recommend you use if you don't need
iOS-specific functionality.
AlertIOS.prompt allows you to prompt the user for input inside of an
-alert popup.
Methods #
static alert(title: string, message?: string, callbackOrButtons?: ?(() => void) | ButtonsArray, type?: AlertType) #
Creates a popup to alert the user. See +alert popup.
Methods #
static alert(title, message?, callbackOrButtons?, type?) #
Creates a popup to alert the user. See Alert.
- title: string -- The dialog's title.
- message: string -- An optional message that appears above the text input.
callbackOrButtons -- This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'.
If passed an array of button configurations, each button should include @@ -10,7 +10,7 @@ a
textkey, as well as optionalonPressandstylstyleshould be one of 'default', 'cancel' or 'destructive'.- type -- deprecated, do not use
Example:
static prompt(title: string, message?: string, callbackOrButtons?: ?((text: string) => void) | ButtonsArray, type?: AlertType, defaultValue?: string) #
Prompt the user to enter some text.
- title: string -- The dialog's title.
- message: string -- An optional message that appears above the text input.
callbackOrButtons -- This optional argument should be either a +);
static prompt(title, message?, callbackOrButtons?, type?, defaultValue?) #
Prompt the user to enter some text.
- title: string -- The dialog's title.
- message: string -- An optional message that appears above the text input.
callbackOrButtons -- This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'.
If passed an array of button configurations, each button should include a
textkey, as well as optionalonPressandstylekeys (see example). @@ -31,14 +31,15 @@ atextkey, as well as optionalonPressandstyl 'default' )
Examples # | Edit on GitHub |
Building React Native from source # | Edit on GitHub |
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Android Support Repository >= 17 (for Android Support Library)
- Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: either have $ANDROID_SDK and $ANDROID_NDK defined, or create a local.properties file in the root of your react-native checkout with the following contents:
Building React Native from source # | Edit on GitHub |
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Android Support Repository >= 17 (for Android Support Library)
- Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: either have $ANDROID_SDK and $ANDROID_NDK defined, or create a local.properties file in the root of your react-native checkout with the following contents:
Example:
Download links for Android NDK #
- Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
- Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
- Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
- Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip
You can find further instructions on the official page.
Building the source #
1. Installing the fork #
First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:
Alternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.
2. Adding gradle dependencies #
Add gradle-download-task as dependency in android/build.gradle:
Android Setup # | Edit on GitHub |
This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator.
Install Git #
On Mac, if you have installed XCode, Git is already installed, otherwise run the following:
brew install gitOn Linux, install Git via your package manager.
On Windows, download and install Git for Windows. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your
PATHenvironment variable.
Install the Android SDK (unless you already have it) #
- Install the latest JDK
- Install the Android SDK:
- On Mac:
brew install android-sdk - On Linux and Windows: Download from the Android website
- On Mac:
Define the ANDROID_HOME environment variable #
IMPORTANT: Make sure the ANDROID_HOME environment variable points to your existing Android SDK:
On Mac, add this to your
~/.bashrc,~/.bash_profileor whatever your shell uses:# If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk +Android Setup – React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/android-ui-performance.html b/docs/android-ui-performance.html index 7bb07297f65..a45d6c0862f 100644 --- a/docs/android-ui-performance.html +++ b/docs/android-ui-performance.html @@ -1,4 +1,4 @@ -Android Setup #
Edit on GitHub This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator.
Install Git #
On Mac, if you have installed XCode, Git is already installed, otherwise run the following:
brew install gitOn Linux, install Git via your package manager.
On Windows, download and install Git for Windows. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your
PATHenvironment variable.
Install the Android SDK (unless you already have it) #
- Install the latest JDK
- Install the Android SDK:
- On Mac:
brew install android-sdk - On Linux and Windows: Download from the Android website
- On Mac:
Define the ANDROID_HOME environment variable #
IMPORTANT: Make sure the
ANDROID_HOMEenvironment variable points to your existing Android SDK:On Mac, add this to your
~/.bashrc,~/.bash_profileor whatever your shell uses:# If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk export ANDROID_HOME=/usr/local/opt/android-sdkOn Linux, add this to your
~/.bashrc,~/.bash_profileor whatever your shell uses:export ANDROID_HOME=<path_where_you_unpacked_android_sdk>On Windows, go to
Control Panel->System and Security->System->Change settings->Advanced->Environment variables->New
NOTE: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.
Use gradle daemon #
React Native Android use gradle as a build system. We recommend to enable gradle daemon functionality which may result in up to 50% improvement in incremental build times for changes in java code. Learn here how to enable it for your platform.
Configure your SDK #
- Open the Android SDK Manager (on Mac start a new shell and run
android); in the window that appears make sure you check:- Android SDK Build-tools version 23.0.1
- Android 6.0 (API 23)
- Local Maven repository for Support Libraries (this is called Android Support Repository in older versions)
- Click "Install Packages"
Install Genymotion #
Genymotion is much easier to set up than stock Google emulators. However, it's only free for personal use. If you want to use the stock Google emulator, see below.
- Download and install Genymotion.
- Open Genymotion. It might ask you to install VirtualBox unless you already have it.
- Create a new emulator and start it.
- To bring up the developer menu press ⌘+M
Alternative: Create a stock Google emulator #
- Start a new shell and run
android; in the window that appears make sure you check:- Intel x86 Atom System Image (for Android 5.1.1 - API 22)
- Intel x86 Emulator Accelerator (HAXM installer)
- Click "Install Packages".
- Configure hardware acceleration (HAXM), otherwise the emulator is going to be slow (or may not run at all).
- On a mac this is typically requires opening:
/usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_<version>.dmgand installing the package within.
- On a mac this is typically requires opening:
- Create an Android Virtual Device (AVD):
- Run
android avdand click on Create... -
- With the new AVD selected, click
Start...
- Run
- To bring up the developer menu press F2 (or install Frappé)
Windows Hyper-V Alternative #
The Visual Studio Emulator for Android is a free android emulator that is hardware accelerated via Hyper-V. It doesn't require you to install Visual Studio at all.
To use it with react-native you just have to add a key and value to your registry:
- Open the Run Command (Windows+R)
- Enter
regedit.exe - In the Registry Editor navigate to
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools - Right Click on
Android SDK Toolsand chooseNew > String Value - Set the name to
Path - Double Click the new
PathKey and set the value toC:\Program Files\Android\sdk. The path value might be different on your machine.
You will also need to run the command
adb reverse tcp:8081 tcp:8081with this emulator.Then restart the emulator and when it runs you can just do
react-native run-androidas usual.Editing your app's Java code in Android Studio #
You can use any editor to edit JavaScript. If you want to use Android Studio to work on native code, from the Welcome screen of Android Studio choose "Import project" and select the
androidfolder of your app.Troubleshooting #
In case you encounter
Execution failed for task ':app:installDebug'. +- With the new AVD selected, click
Start...- To bring up the developer menu press F2 (or ⌘+M for Android Studio 2.0 or newer)
- Install Frappé (OSX only)
Windows Hyper-V Alternative #
The Visual Studio Emulator for Android is a free android emulator that is hardware accelerated via Hyper-V. It doesn't require you to install Visual Studio at all.
To use it with react-native you just have to add a key and value to your registry:
- Open the Run Command (Windows+R)
- Enter
regedit.exe - In the Registry Editor navigate to
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools - Right Click on
Android SDK Toolsand chooseNew > String Value - Set the name to
Path - Double Click the new
PathKey and set the value toC:\Program Files\Android\sdk. The path value might be different on your machine.
You will also need to run the command
adb reverse tcp:8081 tcp:8081with this emulator.Then restart the emulator and when it runs you can just do
react-native run-androidas usual.Editing your app's Java code in Android Studio #
You can use any editor to edit JavaScript. If you want to use Android Studio to work on native code, from the Welcome screen of Android Studio choose "Import project" and select the
androidfolder of your app.Troubleshooting #
In case you encounter
Execution failed for task ':app:installDebug'. com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveExceptiontry downgrading your Gradle version to 1.2.3 in
<project-name>/android/build.gradle(https://github.com/facebook/react-native/issues/2720)Profiling Android UI Performance – React Native | A framework for building native apps using React Profiling Android UI Performance #
Edit on GitHub We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).
The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called systrace. But first...
Make sure that JS dev mode is OFF!
You should see
__DEV__ === false, development-level warning are OFF, performance optimizations are ONin your application logs (which you can view usingadb logcat)Profiling with Systrace #
Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.
Collecting a trace #
NOTE:
Systrace support was added in react-native
v0.15. You will need to build with that version to collect a trace.First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows
$ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>A quick breakdown of this command:
timeis the length of time the trace will be collected in secondssched,gfx, andvieware the android SDK tags (collections of markers) we care about:schedgives you information about what's running on each core of your phone,gfxgives you graphics info such as frame boundaries, andviewgives you information about measure, layout, and draw passes-a <your_package_name>enables app-specific markers, specifically the ones built into the React Native framework.your_package_namecan be found in theAndroidManifest.xmlof your app and looks likecom.example.app
Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.
Reading the trace #
After opening the trace in your browser (preferably Chrome), you should see something like this:
HINT: Use the WASD keys to strafe and zoom
Enable VSync highlighting #
The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:
You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.
Find your process #
Scroll until you see (part of) the name of your package. In this case, I was profiling
com.facebook.adsmanager, which shows up asbook.adsmanagerbecause of silly thread name limits in the kernel.On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread),
mqt_jsandmqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.UI Thread #
This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with
Choreographer,traversals, andDispatchUI:
JS Thread #
This is where JS is executed. The thread name will be either
mqt_jsor<...>depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things likeJSCall,Bridge.executeJSCall, etc:
Native Modules Thread #
This is where native module calls (e.g. the
UIManager) are executed. The thread name will be eithermqt_native_modulesor<...>. To identify it in the latter case, look for things likeNativeCall,callJavaModuleMethod, andonBatchComplete:
Bonus: Render Thread #
If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either
RenderThreador<...>. To identify it in the latter case, look for things likeDrawFrameandqueueBuffer:
Identifying a culprit #
A smooth animation should look something like the following:
Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.
If you noticed chop, however, you might see something like this:
Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, the problem lies in JS.
You might also see something like this:
In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, the problem lies in the native views being rendered.
At this point, you'll have some very helpful information to inform your next steps.
JS Issues #
If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see
RCTEventEmitterbeing called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:
This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into shouldComponentUpdate.
TODO: Add more tools for profiling JS
Native UI Issues #
If you identified a native UI problem, there are usually two scenarios:
- the UI you're trying to draw each frame involves to much work on the GPU, or
- You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).
Too much GPU work #
In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:
Notice the long amount of time spent in
DrawFramethat crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.To mitigate this, you should:
- investigate using
renderToHardwareTextureAndroidfor complex, static content that is being animated/transformed (e.g. theNavigatorslide/alpha animations) - make sure that you are not using
needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.
If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.
Creating new views on the UI thread #
In the second scenario, you'll see something more like this:
Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.
There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.
Still stuck? #
If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.
\ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 29deb4f083c..28130d1b5f0 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,4 +1,4 @@ -Profiling Android UI Performance #
Edit on GitHub We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).
The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called systrace. But first...
Make sure that JS dev mode is OFF!
You should see
__DEV__ === false, development-level warning are OFF, performance optimizations are ONin your application logs (which you can view usingadb logcat)Profiling with Systrace #
Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.
Collecting a trace #
NOTE:
Systrace support was added in react-native
v0.15. You will need to build with that version to collect a trace.First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows
$ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>A quick breakdown of this command:
timeis the length of time the trace will be collected in secondssched,gfx, andvieware the android SDK tags (collections of markers) we care about:schedgives you information about what's running on each core of your phone,gfxgives you graphics info such as frame boundaries, andviewgives you information about measure, layout, and draw passes-a <your_package_name>enables app-specific markers, specifically the ones built into the React Native framework.your_package_namecan be found in theAndroidManifest.xmlof your app and looks likecom.example.app
Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.
Reading the trace #
After opening the trace in your browser (preferably Chrome), you should see something like this:
HINT: Use the WASD keys to strafe and zoom
Enable VSync highlighting #
The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:
You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.
Find your process #
Scroll until you see (part of) the name of your package. In this case, I was profiling
com.facebook.adsmanager, which shows up asbook.adsmanagerbecause of silly thread name limits in the kernel.On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread),
mqt_jsandmqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.UI Thread #
This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with
Choreographer,traversals, andDispatchUI:JS Thread #
This is where JS is executed. The thread name will be either
mqt_jsor<...>depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things likeJSCall,Bridge.executeJSCall, etc:Native Modules Thread #
This is where native module calls (e.g. the
UIManager) are executed. The thread name will be eithermqt_native_modulesor<...>. To identify it in the latter case, look for things likeNativeCall,callJavaModuleMethod, andonBatchComplete:Bonus: Render Thread #
If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either
RenderThreador<...>. To identify it in the latter case, look for things likeDrawFrameandqueueBuffer:Identifying a culprit #
A smooth animation should look something like the following:
Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.
If you noticed chop, however, you might see something like this:
Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, the problem lies in JS.
You might also see something like this:
In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, the problem lies in the native views being rendered.
At this point, you'll have some very helpful information to inform your next steps.
JS Issues #
If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see
RCTEventEmitterbeing called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into shouldComponentUpdate.
TODO: Add more tools for profiling JS
Native UI Issues #
If you identified a native UI problem, there are usually two scenarios:
- the UI you're trying to draw each frame involves to much work on the GPU, or
- You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).
Too much GPU work #
In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:
Notice the long amount of time spent in
DrawFramethat crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.To mitigate this, you should:
- investigate using
renderToHardwareTextureAndroidfor complex, static content that is being animated/transformed (e.g. theNavigatorslide/alpha animations) - make sure that you are not using
needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.
If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.
Creating new views on the UI thread #
In the second scenario, you'll see something more like this:
Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.
There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.
Still stuck? #
If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.
Animated – React Native | A framework for building native apps using React Animated #
Edit on GitHub Animations are an important part of modern UX, and the
Animated+Animated – React Native | A framework for building native apps using React Animated #
Edit on GitHub Animations are an important part of modern UX, and the
Animatedlibrary is designed to make them fluid, powerful, and easy to build and maintain.The simplest workflow is to create an
Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either @@ -58,18 +58,18 @@ event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. CheckoutAnimated.Value.addListeneras a way to work around some of these limitations, but use it sparingly since it might have performance -implications in the future.Methods #
static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig) #
Animates a value from an initial velocity to zero based on a decay -coefficient.
static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig) #
Animates a value along a timed easing curve. The
Easingmodule has tons -of pre-defined curves, or you can use your own function.static spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig) #
Spring animation based on Rebound and Origami. Tracks velocity state to -create fluid motions as the
toValueupdates, and can be chained together.static add(a: Animated, b: Animated) #
Creates a new Animated value composed from two Animated values added -together.
static multiply(a: Animated, b: Animated) #
Creates a new Animated value composed from two Animated values multiplied -together.
static modulo(a: Animated, modulus: number) #
Creates a new Animated value that is the (non-negative) modulo of the -provided Animated value
static delay(time: number) #
Starts an animation after the given delay.
static sequence(animations: Array<CompositeAnimation>) #
Starts an array of animations in order, waiting for each to complete +implications in the future.
Methods #
static decay(value, config) #
Animates a value from an initial velocity to zero based on a decay +coefficient.
static timing(value, config) #
Animates a value along a timed easing curve. The
Easingmodule has tons +of pre-defined curves, or you can use your own function.static spring(value, config) #
Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the
toValueupdates, and can be chained together.static add(a, b) #
Creates a new Animated value composed from two Animated values added +together.
static multiply(a, b) #
Creates a new Animated value composed from two Animated values multiplied +together.
static modulo(a, modulus) #
Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value
static delay(time) #
Starts an animation after the given delay.
static sequence(animations) #
Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no -following animations will be started.
static parallel(animations: Array<CompositeAnimation>, config?: ParallelConfig) #
Starts an array of animations all at the same time. By default, if one +following animations will be started.
static parallel(animations, config?) #
Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override -this with the
stopTogetherflag.static stagger(time: number, animations: Array<CompositeAnimation>) #
Array of animations may run in parallel (overlap), but are started in -sequence with successive delays. Nice for doing trailing effects.
static event(argMapping: Array<Mapping>, config?: EventConfig) #
Takes an array of mappings and extracts values from each arg accordingly, +this with the
stopTogetherflag.static stagger(time, animations) #
Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects.
static event(argMapping, config?) #
Takes an array of mappings and extracts values from each arg accordingly, then calls
setValueon the mapped outputs. e.g.onScroll={Animated.event( [{nativeEvent: {contentOffset: {x: this._scrollX}}}] {listener}, // Optional async listener @@ -78,21 +78,21 @@ sequence with successive delays. Nice for doing trailing effects.: Animated.event([ null, // raw event arg ignored {dx: this._panX}, // gestureState arg - ]),static createAnimatedComponent(Component: any) #
Make any React component Animatable. Used to create
Animated.View, etc.Properties #
Value: AnimatedValue #
Standard value class for driving animations. Typically initialized with + ]),
static createAnimatedComponent(Component) #
Make any React component Animatable. Used to create
Animated.View, etc.Properties #
class AnimatedValue #
Standard value for driving animations. One
Animated.Valuecan drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, -or callingsetValue) will stop any previous ones.Methods #
constructor(value: number) #
setValue(value: number) #
Directly set the value. This will stop any animations running on the value -and update all the bound properties.
setOffset(offset: number) #
Sets an offset that is applied on top of whatever value is set, whether via +or calling
setValue) will stop any previous ones.Methods #
constructor(value) #
setValue(value) #
Directly set the value. This will stop any animations running on the value +and update all the bound properties.
setOffset(offset) #
Sets an offset that is applied on top of whatever value is set, whether via
setValue, an animation, orAnimated.event. Useful for compensating things like the start of a pan gesture.flattenOffset() #
Merges the offset value into the base value and resets the offset to zero. -The final output of the value is unchanged.
addListener(callback: ValueListenerCallback) #
Adds an asynchronous listener to the value so you can observe updates from +The final output of the value is unchanged.
addListener(callback) #
Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to -synchronously read the value because it might be driven natively.
removeListener(id: string) #
removeAllListeners() #
stopAnimation(callback?: ?(value: number) => void) #
Stops any running animation or tracking.
callbackis invoked with the +synchronously read the value because it might be driven natively.removeListener(id) #
removeAllListeners() #
stopAnimation(callback?) #
Stops any running animation or tracking.
callbackis invoked with the final value after stopping the animation, which is useful for updating -state to match the animation position with layout.interpolate(config: InterpolationConfigType) #
Interpolates the value before updating the property, e.g. mapping 0-1 to -0-10.
animate(animation: Animation, callback: EndCallback) #
Typically only used internally, but could be used by a custom Animation -class.
stopTracking() #
Typically only used internally.
track(tracking: Animated) #
Typically only used internally.
class AnimatedValueXY #
2D Value for driving 2D animations, such as pan gestures. Almost identical +state to match the animation position with layout.
interpolate(config) #
Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10.
animate(animation, callback) #
Typically only used internally, but could be used by a custom Animation +class.
stopTracking() #
Typically only used internally.
track(tracking) #
Typically only used internally.
class AnimatedValueXY #
active- The app is running in the foregroundbackground- The app is running in the background. The user is either in another app or on the home screeninactive- This is a transition state that currently never happens for @@ -25,15 +25,16 @@ render: funct ); },active- The app is running in the foregroundbackground- The app is running in the background. The user is either in another app or on the home screeninactive- This is a state that occurs when transitioning between @@ -26,18 +26,19 @@ render: funct ); },- local URI
- assets-library tag
- a tag not matching any of the above, which means the image data will -be stored in memory (and consume memory as long as the process is alive)
- local URI
- assets-library tag
- a tag not matching any of the above, which means the image data will +be stored in memory (and consume memory as long as the process is alive)
'#f0f'(#rgb)'#f0fc'(#rgba)'#ff00ff'(#rrggbb)'#ff00ff00'(#rrggbbaa)'rgb(255, 255, 255)''rgba(255, 255, 255, 1.0)''hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)''transparent''red'0xff00ff00(0xrrggbbaa)- aliceblue (#f0f8ff)
- antiquewhite (#faebd7)
- aqua (#00ffff)
- aquamarine (#7fffd4)
- azure (#f0ffff)
- beige (#f5f5dc)
- bisque (#ffe4c4)
- black (#000000)
- blanchedalmond (#ffebcd)
- blue (#0000ff)
- blueviolet (#8a2be2)
- brown (#a52a2a)
- burlywood (#deb887)
- cadetblue (#5f9ea0)
- chartreuse (#7fff00)
- chocolate (#d2691e)
- coral (#ff7f50)
- cornflowerblue (#6495ed)
- cornsilk (#fff8dc)
- crimson (#dc143c)
- cyan (#00ffff)
- darkblue (#00008b)
- darkcyan (#008b8b)
- darkgoldenrod (#b8860b)
- darkgray (#a9a9a9)
- darkgreen (#006400)
- darkgrey (#a9a9a9)
- darkkhaki (#bdb76b)
- darkmagenta (#8b008b)
- darkolivegreen (#556b2f)
- darkorange (#ff8c00)
- darkorchid (#9932cc)
- darkred (#8b0000)
- darksalmon (#e9967a)
- darkseagreen (#8fbc8f)
- darkslateblue (#483d8b)
- darkslategray (#2f4f4f)
- darkslategrey (#2f4f4f)
- darkturquoise (#00ced1)
- darkviolet (#9400d3)
- deeppink (#ff1493)
- deepskyblue (#00bfff)
- dimgray (#696969)
- dimgrey (#696969)
- dodgerblue (#1e90ff)
- firebrick (#b22222)
- floralwhite (#fffaf0)
- forestgreen (#228b22)
- fuchsia (#ff00ff)
- gainsboro (#dcdcdc)
- ghostwhite (#f8f8ff)
- gold (#ffd700)
- goldenrod (#daa520)
- gray (#808080)
- green (#008000)
- greenyellow (#adff2f)
- grey (#808080)
- honeydew (#f0fff0)
- hotpink (#ff69b4)
- indianred (#cd5c5c)
- indigo (#4b0082)
- ivory (#fffff0)
- khaki (#f0e68c)
- lavender (#e6e6fa)
- lavenderblush (#fff0f5)
- lawngreen (#7cfc00)
- lemonchiffon (#fffacd)
- lightblue (#add8e6)
- lightcoral (#f08080)
- lightcyan (#e0ffff)
- lightgoldenrodyellow (#fafad2)
- lightgray (#d3d3d3)
- lightgreen (#90ee90)
- lightgrey (#d3d3d3)
- lightpink (#ffb6c1)
- lightsalmon (#ffa07a)
- lightseagreen (#20b2aa)
- lightskyblue (#87cefa)
- lightslategray (#778899)
- lightslategrey (#778899)
- lightsteelblue (#b0c4de)
- lightyellow (#ffffe0)
- lime (#00ff00)
- limegreen (#32cd32)
- linen (#faf0e6)
- magenta (#ff00ff)
- maroon (#800000)
- mediumaquamarine (#66cdaa)
- mediumblue (#0000cd)
- mediumorchid (#ba55d3)
- mediumpurple (#9370db)
- mediumseagreen (#3cb371)
- mediumslateblue (#7b68ee)
- mediumspringgreen (#00fa9a)
- mediumturquoise (#48d1cc)
- mediumvioletred (#c71585)
- midnightblue (#191970)
- mintcream (#f5fffa)
- mistyrose (#ffe4e1)
- moccasin (#ffe4b5)
- navajowhite (#ffdead)
- navy (#000080)
- oldlace (#fdf5e6)
- olive (#808000)
- olivedrab (#6b8e23)
- orange (#ffa500)
- orangered (#ff4500)
- orchid (#da70d6)
- palegoldenrod (#eee8aa)
- palegreen (#98fb98)
- paleturquoise (#afeeee)
- palevioletred (#db7093)
- papayawhip (#ffefd5)
- peachpuff (#ffdab9)
- peru (#cd853f)
- pink (#ffc0cb)
- plum (#dda0dd)
- powderblue (#b0e0e6)
- purple (#800080)
- rebeccapurple (#663399)
- red (#ff0000)
- rosybrown (#bc8f8f)
- royalblue (#4169e1)
- saddlebrown (#8b4513)
- salmon (#fa8072)
- sandybrown (#f4a460)
- seagreen (#2e8b57)
- seashell (#fff5ee)
- sienna (#a0522d)
- silver (#c0c0c0)
- skyblue (#87ceeb)
- slateblue (#6a5acd)
- slategray (#708090)
- slategrey (#708090)
- snow (#fffafa)
- springgreen (#00ff7f)
- steelblue (#4682b4)
- tan (#d2b48c)
- teal (#008080)
- thistle (#d8bfd8)
- tomato (#ff6347)
- turquoise (#40e0d0)
- violet (#ee82ee)
- wheat (#f5deb3)
- white (#ffffff)
- whitesmoke (#f5f5f5)
- yellow (#ffff00)
- yellowgreen (#9acd32)
'#f0f'(#rgb)'#f0fc'(#rgba)'#ff00ff'(#rrggbb)'#ff00ff00'(#rrggbbaa)'rgb(255, 255, 255)''rgba(255, 255, 255, 1.0)''hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)''transparent''red'0xff00ff00(0xrrggbbaa)- aliceblue (#f0f8ff)
- antiquewhite (#faebd7)
- aqua (#00ffff)
- aquamarine (#7fffd4)
- azure (#f0ffff)
- beige (#f5f5dc)
- bisque (#ffe4c4)
- black (#000000)
- blanchedalmond (#ffebcd)
- blue (#0000ff)
- blueviolet (#8a2be2)
- brown (#a52a2a)
- burlywood (#deb887)
- cadetblue (#5f9ea0)
- chartreuse (#7fff00)
- chocolate (#d2691e)
- coral (#ff7f50)
- cornflowerblue (#6495ed)
- cornsilk (#fff8dc)
- crimson (#dc143c)
- cyan (#00ffff)
- darkblue (#00008b)
- darkcyan (#008b8b)
- darkgoldenrod (#b8860b)
- darkgray (#a9a9a9)
- darkgreen (#006400)
- darkgrey (#a9a9a9)
- darkkhaki (#bdb76b)
- darkmagenta (#8b008b)
- darkolivegreen (#556b2f)
- darkorange (#ff8c00)
- darkorchid (#9932cc)
- darkred (#8b0000)
- darksalmon (#e9967a)
- darkseagreen (#8fbc8f)
- darkslateblue (#483d8b)
- darkslategray (#2f4f4f)
- darkslategrey (#2f4f4f)
- darkturquoise (#00ced1)
- darkviolet (#9400d3)
- deeppink (#ff1493)
- deepskyblue (#00bfff)
- dimgray (#696969)
- dimgrey (#696969)
- dodgerblue (#1e90ff)
- firebrick (#b22222)
- floralwhite (#fffaf0)
- forestgreen (#228b22)
- fuchsia (#ff00ff)
- gainsboro (#dcdcdc)
- ghostwhite (#f8f8ff)
- gold (#ffd700)
- goldenrod (#daa520)
- gray (#808080)
- green (#008000)
- greenyellow (#adff2f)
- grey (#808080)
- honeydew (#f0fff0)
- hotpink (#ff69b4)
- indianred (#cd5c5c)
- indigo (#4b0082)
- ivory (#fffff0)
- khaki (#f0e68c)
- lavender (#e6e6fa)
- lavenderblush (#fff0f5)
- lawngreen (#7cfc00)
- lemonchiffon (#fffacd)
- lightblue (#add8e6)
- lightcoral (#f08080)
- lightcyan (#e0ffff)
- lightgoldenrodyellow (#fafad2)
- lightgray (#d3d3d3)
- lightgreen (#90ee90)
- lightgrey (#d3d3d3)
- lightpink (#ffb6c1)
- lightsalmon (#ffa07a)
- lightseagreen (#20b2aa)
- lightskyblue (#87cefa)
- lightslategray (#778899)
- lightslategrey (#778899)
- lightsteelblue (#b0c4de)
- lightyellow (#ffffe0)
- lime (#00ff00)
- limegreen (#32cd32)
- linen (#faf0e6)
- magenta (#ff00ff)
- maroon (#800000)
- mediumaquamarine (#66cdaa)
- mediumblue (#0000cd)
- mediumorchid (#ba55d3)
- mediumpurple (#9370db)
- mediumseagreen (#3cb371)
- mediumslateblue (#7b68ee)
- mediumspringgreen (#00fa9a)
- mediumturquoise (#48d1cc)
- mediumvioletred (#c71585)
- midnightblue (#191970)
- mintcream (#f5fffa)
- mistyrose (#ffe4e1)
- moccasin (#ffe4b5)
- navajowhite (#ffdead)
- navy (#000080)
- oldlace (#fdf5e6)
- olive (#808000)
- olivedrab (#6b8e23)
- orange (#ffa500)
- orangered (#ff4500)
- orchid (#da70d6)
- palegoldenrod (#eee8aa)
- palegreen (#98fb98)
- paleturquoise (#afeeee)
- palevioletred (#db7093)
- papayawhip (#ffefd5)
- peachpuff (#ffdab9)
- peru (#cd853f)
- pink (#ffc0cb)
- plum (#dda0dd)
- powderblue (#b0e0e6)
- purple (#800080)
- rebeccapurple (#663399)
- red (#ff0000)
- rosybrown (#bc8f8f)
- royalblue (#4169e1)
- saddlebrown (#8b4513)
- salmon (#fa8072)
- sandybrown (#f4a460)
- seagreen (#2e8b57)
- seashell (#fff5ee)
- sienna (#a0522d)
- silver (#c0c0c0)
- skyblue (#87ceeb)
- slateblue (#6a5acd)
- slategray (#708090)
- slategrey (#708090)
- snow (#fffafa)
- springgreen (#00ff7f)
- steelblue (#4682b4)
- tan (#d2b48c)
- teal (#008080)
- thistle (#d8bfd8)
- tomato (#ff6347)
- turquoise (#40e0d0)
- violet (#ee82ee)
- wheat (#f5deb3)
- white (#ffffff)
- whitesmoke (#f5f5f5)
- yellow (#ffff00)
- yellowgreen (#9acd32)
- On iOS shake the device or press
control + ⌘ + zin the simulator. - On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press
⌘ + morF2to simulate hardware menu button click). You can also install Frappé, a tool for OS X, which allows you to emulate shaking of devices remotely. You can use⌘ + Shift + Ras a shortcut to trigger a shake from Frappé. - For iOS open your project in Xcode and select
Product→Scheme→Edit Scheme...(or press⌘ + <). Next, selectRunfrom the menu on the left and change the Build Configuration toRelease. - For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle
assembleReleasetask). Although this behavior can be customized by passing proper value toReactInstanceManager#setUseDeveloperSupport. - On iOS - open the file
RCTWebSocketExecutor.mand changelocalhostto the IP address of your computer. Shake the device to open the development menu with the option to start debugging. - On Android, if you're running Android 5.0+ device connected via USB you can use
adbcommand line tool to setup port forwarding from the device to your computer. For that run:adb reverse tcp:8081 tcp:8081(see this link for help onadbcommand). Alternatively, you can open dev menu on the device and selectDev Settings, then updateDebug server host for devicesetting to the IP address of your computer. - On iOS, select
Enable Live Reloadvia the developer menu to have the application automatically reload when changes are made to the JavaScript. - On Android, launch dev menu, go to
Dev Settingsand selectAuto reload on JS changeoption - On iOS shake the device or press
control + ⌘ + zin the simulator. - On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press
⌘ + morF2to simulate hardware menu button click). You can also install Frappé, a tool for OS X, which allows you to emulate shaking of devices remotely. You can use⌘ + Shift + Ras a shortcut to trigger a shake from Frappé. - For iOS open your project in Xcode and select
Product→Scheme→Edit Scheme...(or press⌘ + <). Next, selectRunfrom the menu on the left and change the Build Configuration toRelease. - For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle
assembleReleasetask). Although this behavior can be customized by passing proper value toReactInstanceManager#setUseDeveloperSupport. - On iOS - open the file
RCTWebSocketExecutor.mand changelocalhostto the IP address of your computer. Shake the device to open the development menu with the option to start debugging. - On Android, if you're running Android 5.0+ device connected via USB you can use
adbcommand line tool to setup port forwarding from the device to your computer. For that run:adb reverse tcp:8081 tcp:8081(see this link for help onadbcommand). Alternatively, you can open dev menu on the device and selectDev Settings, then updateDebug server host for devicesetting to the IP address of your computer. - On iOS, select
Enable Live Reloadvia the developer menu to have the application automatically reload when changes are made to the JavaScript. - On Android, launch dev menu, go to
Dev Settingsand selectAuto reload on JS changeoption
2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal
Animated.Value, but multiplexed. Contains two regularAnimated.Values under the hood. Example:class DraggableView extends React.Component { constructor(props) { @@ -123,18 +123,19 @@ API to normalAnimated.Value, but multiplexed. Contains two regula </Animated.View> ); } - }Methods #
constructor(valueIn?: ?{x: number | AnimatedValue; y: number | AnimatedValue}) #
setValue(value: {x: number; y: number}) #
setOffset(offset: {x: number; y: number}) #
flattenOffset() #
stopAnimation(callback?: ?() => number) #
addListener(callback: ValueXYListenerCallback) #
removeListener(id: string) #
getLayout() #
Converts
{x, y}into{left, top}for use in style, e.g.style={this.state.anim.getLayout()}getTranslateTransform() #
Converts
{x, y}into a useable translation transform, e.g.style={{ + }Methods #
constructor(valueIn?) #
setValue(value) #
setOffset(offset) #
flattenOffset() #
stopAnimation(callback?) #
addListener(callback) #
removeListener(id) #
getLayout() #
Converts
{x, y}into{left, top}for use in style, e.g.style={this.state.anim.getLayout()}getTranslateTransform() #
Converts
{x, y}into a useable translation transform, e.g.style={{ transform: this.state.anim.getTranslateTransform() }}Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { Animated, Easing, StyleSheet, Text, View, -} = React; +} = ReactNative; var UIExplorerButton = require('./UIExplorerButton'); exports.framework = 'React'; @@ -360,6 +361,6 @@ exports.examples \ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index c698f5e2972..1841041c3e5 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animations – React Native | A framework for building native apps using React Animations #
Edit on GitHub Fluid, meaningful animations are essential to the mobile user experience. Like +
Animations – React Native | A framework for building native apps using React Animations #
Edit on GitHub Fluid, meaningful animations are essential to the mobile user experience. Like everything in React Native, Animation APIs for React Native are currently under development, but have started to coalesce around two complementary systems:
LayoutAnimationfor animated global layout transactions, andAnimatedfor @@ -149,23 +149,25 @@ row below which would otherwise require explicit coordination between the components in order to animate them all in sync.Note that although
LayoutAnimationis very powerful and can be quite useful, it provides much less control thanAnimatedand other animation libraries, so you may need to use another approach if you can't getLayoutAnimationto do -what you want.Note that in order to get this to work on Android you need to set the following flags via
UIManager:UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
var App = React.createClass({ +what you want.Note that in order to get this to work on Android you need to set the following flags via
UIManager:UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);class App extends React.Component { + constructor(props) { + super(props); + this.state = { w: 100, h: 100 }; + this._onPress = this._onPress.bind(this); + } + componentWillMount() { // Animate creation LayoutAnimation.spring(); }, - getInitialState() { - return { w: 100, h: 100 } - }, - _onPress() { // Animate the update LayoutAnimation.spring(); this.setState({w: this.state.w + 15, h: this.state.h + 15}) - }, + } - render: function() { + render() { return ( <View style={styles.container}> <View style={[styles.box, {width: this.state.w, height: this.state.h}]} /> @@ -177,7 +179,7 @@ what you want.Note that in order to get this to work on Android/View> ); } -});
This example uses a preset value, you can customize the animations as +};
This example uses a preset value, you can customize the animations as you need, see LayoutAnimation.js for more information.
requestAnimationFrame #
requestAnimationFrameis a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that @@ -201,13 +203,14 @@ provides a selection of popular ea that can be applied to make your animations more pleasing.This library does not ship with React Native - in order to use it on your project, you will need to install it with
npm i react-tween-state --savefrom your project directory.import tweenState from 'react-tween-state'; - -var App = React.createClass({ - mixins: [tweenState.Mixin], - - getInitialState() { - return { opacity: 1 } - }, +import reactMixin from 'react-mixin'; // https://github.com/brigand/react-mixin + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { opacity: 1 }; + this._animateOpacity = this._animateOpacity.bind(this); + } _animateOpacity() { this.tweenState('opacity', { @@ -215,7 +218,7 @@ your project, you will need to install it withnpm i react-tween-state duration: 1000, endValue: this.state.opacity === 0.2 ? 1 : 0.2, }); - }, + } render() { return ( @@ -227,8 +230,10 @@ your project, you will need to install it withnpm i react-tween-state </TouchableWithoutFeedback> </View> ) - }, -});
Here we animated the opacity, but as you might guess, we can animate any + } +} + +reactMixin.onClass(App, tweenState.Mixin);
Here we animated the opacity, but as you might guess, we can animate any numeric value. Read more about react-tween-state in its README.
Rebound (Not recommended - use Animated instead) #
Rebound.js is a JavaScript port of Rebound for Android. It is @@ -243,7 +248,12 @@ by React Native on
NavigatorandWarningBox.import rebound from 'rebound'; -var App = React.createClass({ +class App extends React.Component { + constructor(props) { + super(props); + this._onPressIn = this._onPressIn.bind(this); + this._onPressOut = this._onPressOut.bind(this); + } // First we initialize the spring and add a listener, which calls // setState whenever it updates componentWillMount() { @@ -262,17 +272,17 @@ the original value.import rebound fro // Initialize the spring value at 1 this._scrollSpring.setCurrentValue(1); - }, + } _onPressIn() { this._scrollSpring.setEndValue(0.5); - }, + } _onPressOut() { this._scrollSpring.setEndValue(1); - }, + } - render: function() { + render() { var imageStyle = { width: 250, height: 200, @@ -290,7 +300,7 @@ the original value.import rebound fro </View> ); } -});You can also clamp the spring values so that they don't overshoot and +}
You can also clamp the spring values so that they don't overshoot and oscillate around the end value. In the above example, we would add
this._scrollSpring.setOvershootClampingEnabled(true)to change this. See the below gif for an example of where in your interface you might @@ -316,7 +326,7 @@ and hasn't been optimized withshouldComponentUpdate.// transform via style (avoid clashes when re-rendering) and to set the // photo ref -render: function() { +render() { return ( <View style={styles.container}> <TouchableWithoutFeedback onPressIn={this._onPressIn} onPressOut={this._onPressOut}> @@ -381,6 +391,6 @@ source.\ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index 30ce17969a2..8439cceb651 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -AppRegistry – React Native | A framework for building native apps using React AppRegistry #
Edit on GitHub AppRegistryis the JS entry point to running all React Native apps. App +AppRegistry – React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index 73c6fd7e244..b4512d78ae9 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -AppRegistry #
Edit on GitHub AppRegistryis the JS entry point to running all React Native apps. App root components should register themselves withAppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking @@ -6,7 +6,7 @@ for the app and then actually run the app when it's ready by invokingAppRegistry.unmountApplicationComponentAtRootTagwith the tag that was pass intorunApplication. These should always be used as a pair.AppRegistryshould berequired early in therequiresequence to make sure the JS execution environment is setup before other modules are -required.Methods #
static registerConfig(config: Array<AppConfig>) #
static registerComponent(appKey: string, getComponentFunc: ComponentProvider) #
static registerRunnable(appKey: string, func: Function) #
static getAppKeys() #
static runApplication(appKey: string, appParameters: any) #
static unmountApplicationComponentAtRootTag(rootTag: number) #
AppState – React Native | A framework for building native apps using React AppState #
Edit on GitHub AppStatecan tell you if the app is in the foreground or background, +AppState – React Native | A framework for building native apps using React AppState #
Edit on GitHub AppStatecan tell you if the app is in the foreground or background, and notify you when the state changes.AppState is frequently used to determine the intent and proper behavior when handling push notifications.
App States #
This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the
activestate, and the null -state will happen only momentarily.Methods #
Properties #
currentState: TypeCastExpression #
Examples #
Edit on GitHub 'use strict'; +state will happen only momentarily.Methods #
Properties #
currentState: TypeCastExpression #
Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { AppState, Text, View -} = React; +} = ReactNative; var AppStateSubscription = React.createClass({ getInitialState() { @@ -105,6 +106,6 @@ exports.examples \ No newline at end of file diff --git a/docs/appstateios.html b/docs/appstateios.html index b81893bfa49..341ed5a05ec 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -1,4 +1,4 @@ -AppStateIOS – React Native | A framework for building native apps using React AppStateIOS #
Edit on GitHub AppStateIOScan tell you if the app is in the foreground or background, +AppStateIOS – React Native | A framework for building native apps using React AppStateIOS #
Edit on GitHub AppStateIOScan tell you if the app is in the foreground or background, and notify you when the state changes.AppStateIOS is frequently used to determine the intent and proper behavior when handling push notifications.
iOS App States #
This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the
activestate, and the null -state will happen only momentarily.Methods #
Properties #
currentState: TypeCastExpression #
// TODO: getCurrentAppState callback seems to be called at a really late stage +state will happen only momentarily.
Methods #
Properties #
currentState: TypeCastExpression #
// TODO: getCurrentAppState callback seems to be called at a really late stage // after app launch. Trying to get currentState when mounting App component // will likely to have the initial value here. // Initialize to 'active' instead of null.
Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { AppStateIOS, Text, View -} = React; +} = ReactNative; var AppStateSubscription = React.createClass({ getInitialState() { @@ -127,6 +128,6 @@ exports.examples \ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 0d651778eb5..39a6f5097d6 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,11 +1,13 @@ -AsyncStorage – React Native | A framework for building native apps using React AsyncStorage #
Edit on GitHub AsyncStorage is a simple, asynchronous, persistent, key-value storage +
AsyncStorage – React Native | A framework for building native apps using React AsyncStorage #
Edit on GitHub AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it -operates globally.
This JS code is a simple facade over the native iOS implementation to provide -a clear JS API, real Error objects, and simple non-multi functions. Each -method returns a
Promiseobject.Methods #
static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) #
Fetches
keyand passes the result tocallback, along with anErrorif -there is any. Returns aPromiseobject.static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) #
Sets
valueforkeyand callscallbackon completion, along with an -Errorif there is any. Returns aPromiseobject.static removeItem(key: string, callback?: ?(error: ?Error) => void) #
Returns a
Promiseobject.static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void) #
Merges existing value with input value, assuming they are stringified json. +operates globally.
On iOS, AsyncStorage is backed by native code that stores small values in a serialized +dictionary and larger values in separate files. On Android, AsyncStorage will use either +RocksDB or SQLite based on what is available. This JS code is a simple facade that +provides a clear JS API, real Error objects, and simple non-multi functions. Each +method returns a
Promiseobject.Methods #
static getItem(key, callback?) #
Fetches
keyand passes the result tocallback, along with anErrorif +there is any. Returns aPromiseobject.static setItem(key, value, callback?) #
Sets
valueforkeyand callscallbackon completion, along with an +Errorif there is any. Returns aPromiseobject.static removeItem(key, callback?) #
Returns a
Promiseobject.static mergeItem(key, value, callback?) #
Merges existing value with input value, assuming they are stringified json. Returns a
Promiseobject. Not supported by all native implementations.Example:
let UID123_object = { name: 'Chris', age: 30, @@ -25,9 +27,9 @@ AsyncStorage. // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} }); }); -});static clear(callback?: ?(error: ?Error) => void) #
Erases all AsyncStorage for all clients, libraries, etc. You probably +});
static clear(callback?) #
Erases all AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your -own keys instead. Returns a
Promiseobject.static getAllKeys(callback?: ?(error: ?Error, keys: ?Array<string>) => void) #
Gets all keys known to the app, for all callers, libraries, etc. Returns a
Promiseobject.Example: see multiGet for example
static flushGetRequests() #
Flushes any pending requests using a single multiget
static multiGet(keys: Array<string>, callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void) #
multiGet invokes callback with an array of key-value pair arrays that +own keys instead. Returns a
Promiseobject.static getAllKeys(callback?) #
Gets all keys known to the app, for all callers, libraries, etc. Returns a
Promiseobject.Example: see multiGet for example
static flushGetRequests() #
Flushes any pending requests using a single multiget
static multiGet(keys, callback?) #
multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a
Promiseobject.multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
Example:
AsyncStorage.getAllKeys((err, keys) => { AsyncStorage.multiGet(keys, (err, stores) => { stores.map((result, i, store) => { @@ -36,12 +38,12 @@ matches the input format of multiSet. Returns aPromiseobject. let value = store[i][1]; }); }); -});static multiSet(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #
multiSet and multiMerge take arrays of key-value array pairs that match -the output of multiGet, e.g. Returns a
Promiseobject.multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
Example: see multiMerge for an example
static multiRemove(keys: Array<string>, callback?: ?(errors: ?Array<Error>) => void) #
Delete all the keys in the
keysarray. Returns aPromiseobject.Example:
let keys = ['k1', 'k2']; +});static multiSet(keyValuePairs, callback?) #
multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g. Returns a
Promiseobject.multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
Example: see multiMerge for an example
static multiRemove(keys, callback?) #
Delete all the keys in the
keysarray. Returns aPromiseobject.Example:
let keys = ['k1', 'k2']; AsyncStorage.multiRemove(keys, (err) => { // keys k1 & k2 removed, if they existed // do most stuff after removal (if you want) -});static multiMerge(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #
Merges existing values with input values, assuming they are stringified +});
static multiMerge(keyValuePairs, callback?) #
Merges existing values with input values, assuming they are stringified json. Returns a
Promiseobject.Not supported by all native implementations.
Example:
// first user, initial values let UID234_object = { name: 'Chris', @@ -85,13 +87,14 @@ AsyncStorage.}); });Properties #
Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { AsyncStorage, PickerIOS, Text, View -} = React; +} = ReactNative; var PickerItemIOS = PickerIOS.Item; var STORAGE_KEY = '@AsyncStorageExample:key'; @@ -202,6 +205,6 @@ exports.examples \ No newline at end of file diff --git a/docs/backandroid.html b/docs/backandroid.html index ed360a8ccd7..aab274b9085 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,11 +1,11 @@ -BackAndroid – React Native | A framework for building native apps using React BackAndroid #
Edit on GitHub Detect hardware back button presses, and programmatically invoke the default back button +
BackAndroid – React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 53222f928a9..8ebe2081312 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,8 +1,9 @@ -BackAndroid #
Edit on GitHub Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true.
Example:
BackAndroid.addEventListener('hardwareBackPress', function() { if (!this.onMainScreen()) { this.goBack(); return true; } return false; -});Methods #
CameraRoll – React Native | A framework for building native apps using React CameraRoll #
Edit on GitHub CameraRollprovides access to the local camera roll / gallery.Methods #
static saveImageWithTag(tag) #
Saves the image to the camera roll / gallery.
On Android, the tag is a local URI, such as
"file:///sdcard/img.png".On iOS, the tag can be one of the following:
Returns a Promise which when resolved will be passed the new URI.
static getPhotos(params: object) #
Returns a Promise with photo identifier objects from the local camera +
CameraRoll – React Native | A framework for building native apps using React CameraRoll #
Edit on GitHub CameraRollprovides access to the local camera roll / gallery.Methods #
static saveImageWithTag(tag) #
Saves the image to the camera roll / gallery.
On Android, the tag is a local URI, such as
"file:///sdcard/img.png".On iOS, the tag can be one of the following:
Returns a Promise which when resolved will be passed the new URI.
static getPhotos(params) #
Returns a Promise with photo identifier objects from the local camera roll of the device matching shape defined by
getPhotosReturnChecker.@param {object} params See
getPhotosParamChecker.Returns a Promise which when resolved will be of shape
getPhotosReturnChecker.Examples #
Edit on GitHub 'use strict'; -const React = require('react-native'); +const React = require('react'); +const ReactNative = require('react-native'); const { CameraRoll, Image, @@ -12,7 +13,7 @@ const { Text, View, TouchableOpacity -} = React; +} = ReactNative; const CameraRollView = require('./CameraRollView'); @@ -141,6 +142,6 @@ exports.examples \ No newline at end of file diff --git a/docs/clipboard.html b/docs/clipboard.html index 599341f2c60..600f02ebffb 100644 --- a/docs/clipboard.html +++ b/docs/clipboard.html @@ -1,15 +1,16 @@ -Clipboard – React Native | A framework for building native apps using React Clipboard #
Edit on GitHub Clipboardgives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString() #
Get content of string type, this method returns a
Promise, so you can use following code to get clipboard contentasync _getContent() { +Clipboard – React Native | A framework for building native apps using React Clipboard #
Edit on GitHub Clipboardgives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString() #
Get content of string type, this method returns a
Promise, so you can use following code to get clipboard contentasync _getContent() { var content = await Clipboard.getString(); -}static setString(content: string) #
Set content of string type. You can use following code to set clipboard content
_setContent() { +}static setString(content) #
Set content of string type. You can use following code to set clipboard content
_setContent() { Clipboard.setString('hello world'); }@param the content to be stored in the clipboard.
Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { Clipboard, View, Text, -} = React; +} = ReactNative; var ClipboardExample = React.createClass({ getInitialState() { @@ -67,6 +68,6 @@ exports.examples \ No newline at end of file diff --git a/docs/colors.html b/docs/colors.html index e11e329d002..1dd551a0073 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Colors – React Native | A framework for building native apps using React Colors #
Edit on GitHub The following formats are supported:
For the named colors, React Native follows the CSS3 specification:
\ No newline at end of file diff --git a/docs/communication-ios.html b/docs/communication-ios.html index 849cfa57ad7..d12ef109d35 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -Colors #
Edit on GitHub The following formats are supported:
For the named colors, React Native follows the CSS3 specification:
Communication between native and React Native – React Native | A framework for building native apps using React Communication between native and React Native #
Edit on GitHub In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If we have an ancestor component that rely on the state of its descendant, the recommended solution would be to pass down a callback that would be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use
RCTRootView.RCTRootViewis aUIViewthat holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootViewhas an initializer that allows you to pass arbitrary properties down to the React Native app. TheinitialPropertiesparameter has to be an instance ofNSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.NSArray *imageList = @[@"http://foo.com/bar1.png", +Communication between native and React Native – React Native | A framework for building native apps using React Communication between native and React Native #
Edit on GitHub In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If we have an ancestor component that rely on the state of its descendant, the recommended solution would be to pass down a callback that would be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use
RCTRootView.RCTRootViewis aUIViewthat holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootViewhas an initializer that allows you to pass arbitrary properties down to the React Native app. TheinitialPropertiesparameter has to be an instance ofNSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.NSArray *imageList = @[@"http://foo.com/bar1.png", @"http://foo.com/bar2.png"]; NSDictionary *props = @{@"images" : imageList}; @@ -88,6 +88,6 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.24" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html index 5f62b69b2e7..b029343448f 100644 --- a/docs/datepickerandroid.html +++ b/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -DatePickerAndroid – React Native | A framework for building native apps using React DatePickerAndroid #
Edit on GitHub Opens the standard Android date picker dialog.
Example #
try { +DatePickerAndroid – React Native | A framework for building native apps using React DatePickerAndroid #
Edit on GitHub Opens the standard Android date picker dialog.
Example #
try { const {action, year, month, day} = await DatePickerAndroid.open({ // Use `new Date()` for current date. // May 25 2020. Month 0 is January. @@ -9,7 +9,7 @@ } } catch ({code, message}) { console.warn('Cannot open date picker', message); -}Methods #
static open(options: Object) #
Opens the standard Android date picker dialog.
The available keys for the
optionsobject are: +}Methods #
static open(options) #
Opens the standard Android date picker dialog.
The available keys for the
optionsobject are:date(Dateobject or timestamp in milliseconds) - date to show by defaultminDate(Dateor timestamp in milliseconds) - minimum date that can be selected *maxDate(Dateobject or timestamp in milliseconds) - minimum date that can be selectedReturns a Promise which will be invoked an object containing
action,year,month(0-11), @@ -18,13 +18,14 @@ still be resolved with action beingDatePickerAndroid.dismissedActionAlways check whether theactionbefore reading the values.Note the native date picker dialog has some UI glitches on Android 4 and lower when using the
minDateandmaxDateoptions.static dateSetAction() #
A date has been selected.
static dismissedAction() #
The dialog has been dismissed.
Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { DatePickerAndroid, StyleSheet, Text, TouchableWithoutFeedback, -} = React; +} = ReactNative; var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage'); @@ -51,7 +52,7 @@ when using the< async showPicker(stateKey, options) { try { var newState = {}; - const {action, year, month, day} = await DatePickerAndroid.open(options); + const {action, year, month, day} = await DatePickerAndroid.open(options); if (action === DatePickerAndroid.dismissedAction) { newState[stateKey + 'Text'] = 'dismissed'; } else { @@ -135,6 +136,6 @@ module.exports \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 889d361e380..4f6a3c2bfaf 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -minDateandmaxDateoptions.DatePickerIOS – React Native | A framework for building native apps using React DatePickerIOS #
Edit on GitHub Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +DatePickerIOS – React Native | A framework for building native apps using React DatePickerIOS #
Edit on GitHub Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to theonDateChangecallback and update thedateprop in order for the component to update, otherwise the user's change will be reverted immediately to reflectprops.dateas the @@ -8,14 +8,15 @@ date and time.Examples #
Edit on GitHub 'use strict'; -var React = require('react-native'); +var React = require('react'); +var ReactNative = require('react-native'); var { DatePickerIOS, StyleSheet, Text, TextInput, View, -} = React; +} = ReactNative; var DatePickerExample = React.createClass({ getDefaultProps: function () { @@ -174,6 +175,6 @@ exports.examples \ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index ee87c7a14fe..280929d8ebb 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,5 @@ -Debugging – React Native | A framework for building native apps using React Debugging #
Edit on GitHub Debugging React Native Apps #
To access the in-app developer menu:
Hint
To disable the developer menu for production builds:
Android logging #
Run
adb logcat *:S ReactNative:V ReactNativeJS:Vin a terminal to see your Android app's logs.Reload #
Selecting
Reload(or pressing⌘ + rin the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image toImages.xcassetson iOS or tores/drawablefolder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.YellowBox/RedBox #
Using
console.warnwill display an on-screen log on a yellow background. Click on this warning to show more information about it full screen and/or dismiss the warning.You can use
console.errorto display a full screen error on a red background.These boxes only appear when you're running your app in dev mode.
Chrome Developer Tools #
To debug the JavaScript code in Chrome, select
Debug in Chromefrom the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.In Chrome, press
⌘ + option + ior selectView→Developer→Developer Toolsto toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.To debug on a real device:
Live Reload #
This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:
FPS (Frames per Second) Monitor #
On
0.5.0-rcand higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.\ No newline at end of file diff --git a/docs/dimensions.html b/docs/dimensions.html index 821a862937e..f2ec17d21af 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -1,5 +1,5 @@ -Debugging #
Edit on GitHub Debugging React Native Apps #
To access the in-app developer menu:
Hint
To disable the developer menu for production builds:
Android logging #
Run
adb logcat *:S ReactNative:V ReactNativeJS:Vin a terminal to see your Android app's logs.Reload #
Selecting
Reload(or pressing⌘ + rin the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image toImages.xcassetson iOS or tores/drawablefolder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.YellowBox/RedBox #
Using
console.warnwill display an on-screen log on a yellow background. Click on this warning to show more information about it full screen and/or dismiss the warning.You can use
console.errorto display a full screen error on a red background.By default, the warning box is enabled in
__DEV__. Set the following flag to disable it:console.disableYellowBox = true; +console.warn('YellowBox is disabled.');Specific warnings can be ignored programmatically by setting the array:
console.ignoredYellowBox = ['Warning: ...'];Strings in
console.ignoredYellowBoxcan be a prefix of the warning that should be ignored.Chrome Developer Tools #
To debug the JavaScript code in Chrome, select
Debug JS Remotelyfrom the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.In Chrome, press
⌘ + option + ior selectView→Developer→Developer Toolsto toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.To debug on a real device:
Custom JavaScript debugger #
To use a custom JavaScript debugger define the
REACT_DEBUGGERenvironment variable to a command that will start your custom debugger. That variable will be read from the Packager process. If that environment variable is set, selectingDebug JS Remotelyfrom the developer menu will execute that command instead of opening Chrome. The exact command to be executed is the contents of the REACT_DEBUGGER environment variable followed by the space separated paths of all project roots (e.g. If you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative" then the command "node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app" will end up being executed). Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.Live Reload #
This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:
FPS (Frames per Second) Monitor #
On
0.5.0-rcand higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.Dimensions – React Native | A framework for building native apps using React Dimensions #
Edit on GitHub Methods #
static set(dims: {[key:string]: any}) #
This should only be called from native code by sending the -didUpdateDimensions event.
@param {object} dims Simple string-keyed object of dimensions to set
static get(dim: string) #
Initial dimensions are set before
runApplicationis called so they should +Dimensions – React Native | A framework for building native apps using React Dimensions #
Edit on GitHub Methods #
static set(dims) #
This should only be called from native code by sending the +didUpdateDimensions event.
@param {object} dims Simple string-keyed object of dimensions to set
static get(dim) #
Initial dimensions are set before
runApplicationis called so they should be available before any other require's are run, but may be updated later.Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather @@ -21,6 +21,6 @@ setting a value in a
StyleSheet).Example:
var {height, apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.24" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index fa854ac7833..3b71320cdec 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -1,4 +1,4 @@ -Direct Manipulation – React Native | A framework for building native apps using React Direct Manipulation #
Edit on GitHub It is sometimes necessary to make changes directly to a component +
Direct Manipulation – React Native | A framework for building native apps using React Direct Manipulation #
Edit on GitHub It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile @@ -10,7 +10,7 @@ hierarchy and reconciling many views.
setNativePropsis imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem withsetState-and shouldComponentUpdate.setNativeProps with TouchableOpacity #
TouchableOpacity +and shouldComponentUpdate.
setNativeProps with TouchableOpacity #
TouchableOpacity uses
setNativePropsinternally to update the opacity of its child component:setOpacityTo: function(value) { // Redacted: animation related code @@ -146,6 +146,6 @@ usesetStateinstead ofsetNativeProps.\ No newline at end of file diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html index 766820dab03..843899df4b5 100644 --- a/docs/drawerlayoutandroid.html +++ b/docs/drawerlayoutandroid.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid – React Native | A framework for building native apps using React DrawerLayoutAndroid #
Edit on GitHub React component that wraps the platform
DrawerLayout(Android only). The +DrawerLayoutAndroid – React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/embedded-app-android.html b/docs/embedded-app-android.html index c74425f6215..40e67ec04c5 100644 --- a/docs/embedded-app-android.html +++ b/docs/embedded-app-android.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid #
Edit on GitHub React component that wraps the platform
DrawerLayout(Android only). The Drawer (typically used for navigation) is rendered withrenderNavigationViewand direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the @@ -20,7 +20,11 @@ be set by thedrawerWidthprop.Example:
/View> </DrawerLayoutAndroid> ); -},Props #
drawerLockMode enum('unlocked', 'locked-closed', 'locked-open') #
Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +},
Props #
drawerBackgroundColor color #
Specifies the background color of the drawer. The default value is white. +If you want to set the opacity of the drawer, use rgba. Example:
return ( + <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)"> + </DrawerLayoutAndroid> +);drawerLockMode enum('unlocked', 'locked-closed', 'locked-open') #
Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. - locked-closed, meaning that the drawer will stay closed and not respond to gestures. - locked-open, meaning that the drawer will stay opened and not respond to gestures. @@ -33,7 +37,7 @@ from the edge of the window.
renderNavigationView function #
The navigation view that will be rendered to the side of the screen and can be pulled in.
Integrating with Existing Apps – React Native | A framework for building native apps using React