React NativeAccessibility #
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.
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
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 #
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:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
accessibilityTraits (iOS) #
Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by accessibilityTraits.
To use, set the accessibilityTraits property to one of (or an array of) accessibility trait strings:
- none Used when the element has no traits.
- button Used when the element should be treated as a button.
- link Used when the element should be treated as a link.
- header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- search Used when the text field element should also be treated as a search field.
- image Used when the element should be treated as an image. Can be combined with button or link, for example.
- selected Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- plays Used when the element plays its own sound when activated.
- key Used when the element acts as a keyboard key.
- text Used when the element should be treated as static text that cannot change.
- summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- disabled Used when the control is not enabled and does not respond to user input.
- frequentUpdates Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- startsMedia Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- adjustable Used when an element can be "adjusted" (e.g. a slider).
- allowsDirectInteraction Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- pageTurn Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
accessibilityViewIsModal (iOS) #
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A.
-On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
onAccessibilityTap (iOS) #
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
onMagicTap (iOS) #
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
accessibilityComponentType (Android) #
In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
accessibilityTraits (iOS) #
Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by accessibilityTraits.
To use, set the accessibilityTraits property to one of (or an array of) accessibility trait strings:
- none Used when the element has no traits.
- button Used when the element should be treated as a button.
- link Used when the element should be treated as a link.
- header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- search Used when the text field element should also be treated as a search field.
- image Used when the element should be treated as an image. Can be combined with button or link, for example.
- selected Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- plays Used when the element plays its own sound when activated.
- key Used when the element acts as a keyboard key.
- text Used when the element should be treated as static text that cannot change.
- summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- disabled Used when the control is not enabled and does not respond to user input.
- frequentUpdates Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- startsMedia Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- adjustable Used when an element can be "adjusted" (e.g. a slider).
- allowsDirectInteraction Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- pageTurn Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
onAccessibilityTap (iOS) #
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
onMagicTap (iOS) #
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
accessibilityComponentType (Android) #
In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.
B contains a child view C a
backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
<Text> Second layout </Text>
</View>
-</View>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.
Checking if a Screen Reader is Enabled #
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
Sending Accessibility Events (Android) #
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.
Sending Accessibility Events (Android) #
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
B contains a child view C a
<CustomRadioButton
accessibleComponentType={this.state.radioButton}
- onPress={this._onPress}/>In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.
Testing VoiceOver Support (iOS) #
To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.
To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.
At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.
You can edit the content above on GitHub and send us a pull request!
ActionSheetIOS #
Methods #
static showActionSheetWithOptions(options, callback) #
Display an iOS action sheet. The options object must contain one or more
+
ActionSheetIOS #
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 and url and can additionally have
a subject or excludedActivityTypes:
url(string) - a URL to sharemessage(string) - a message to sharesubject(string) - a subject for the messageexcludedActivityTypes(array) - the activities to exclude from the ActionSheet
NOTE: if url points to a local file, or is a base64-encoded
@@ -204,7 +204,7 @@ exports.examples return <ShareScreenshotExample />;
}
}
-];
ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: bool #
Whether to show the indicator (true, the default) or hide it (false).
color?: [object Object] #
The foreground color of the spinner (default is gray).
size?: [object Object], [object Object] #
Size of the indicator (default is 'small'). -Passing a number to the size prop is only supported on Android.
ioshidesWhenStopped?: bool #
Whether the indicator should hide when not animating (true by default).
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: enum('small', 'large'), number #
Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android.
ioshidesWhenStopped?: bool #
Whether the indicator should hide when not animating (true by default).
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
AdSupportIOS #
Methods #
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
AdSupportIOS #
Methods #
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Alert #
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the +
Alert #
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,
see AlertIOS; entering text in an alert is common on iOS only.
iOS #
On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of 'default', 'cancel' or 'destructive'.
Android #
On Android at most three buttons can be specified. Android has a concept -of a neutral, negative and a positive button:
- If you specify one button, it will be the 'positive' one (such as 'OK')
- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
By default alerts on Android can be dismissed by tapping outside of the alert
-box. This event can be handled by providing an optional options parameter,
-with an onDismiss callback property { onDismiss: () => {} }.
Alternatively, the dismissing behavior can be disabled altogether by providing
-an optional options parameter with the cancelable property set to false
-i.e. { cancelable: false }
Example usage:
- If you specify one button, it will be the 'positive' one (such as 'OK')
- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
Note that by default alerts on Android can be dismissed by clicking outside of their alert box.
+To prevent this behavior, you can provide
+an optional options parameter { cancelable: false } to the Alert method.
Example usage:
AlertIOS #
AlertIOS provides functionality to create an iOS alert dialog with a
+
AlertIOS #
AlertIOS provides functionality to create an iOS alert dialog with a
message or create a prompt for user input.
Creating an iOS alert:
Building React Native from source #
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: #
Step 1: Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash:
.bash_profileor.bashrc - zsh:
.zprofileor.zshrc - ksh:
.profileor$ENV
Example:
Building React Native from source #
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: #
Step 1: Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash:
.bash_profileor.bashrc - zsh:
.zprofileor.zshrc - ksh:
.profileor$ENV
Example:
Step 2: Create a local.properties file in the android directory of your react-native app 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:
Profiling Android UI Performance #
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
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:
If your trace .html file isn't opening correctly, check your browser console for the following:
Since Object.observe was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:
- Opening tab in chrome chrome://tracing
- Selecting load
- Selecting the html file generated from the previous command.
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 as book.adsmanager because 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_js and mqt_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, and DispatchUI:
JS Thread #
This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:
Native Modules Thread #
This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:
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 RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:
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 RCTEventEmitter being 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 DrawFrame that 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.
You can edit the content above on GitHub and send us a pull request!
Redirecting...
Click here if you are not redirected. \ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 2ef2eacaced..5112fd186f0 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,75 +1,67 @@ -Animated #
The Animated library is designed to make animations fluid, powerful, and
-easy to build and maintain. Animated focuses on declarative relationships
-between inputs and outputs, with configurable transforms in between, and
-simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an
-Animated.Value, hook it up to one or more style attributes of an animated
-component, and then drive updates via animations using Animated.timing():
Refer to the Animations guide to see
-additional examples of Animated in action.
Overview #
There are two value types you can use with Animated:
Animated.Value()for single valuesAnimated.ValueXY()for vectors
Animated.Value can bind to style properties or other props, and can be
-interpolated as well. A single Animated.Value can drive any number of
-properties.
Configuring animations #
Animated provides three types of animation types. Each animation type
-provides a particular animation curve that controls how your values animate
-from their initial value to the final value:
Animated.decay()starts with an initial -velocity and gradually slows to a stop.Animated.spring()provides a simple -spring physics model.Animated.timing()animates a value over time -using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric
-easeInOut curve that conveys the gradual acceleration of an object to full
-speed and concludes by gradually decelerating to a stop.
Working with animations #
Animations are started by calling start() on your animation. start()
-takes a completion callback that will be called when the animation is done.
-If the animation finished running normally, the completion callback will be
-invoked with {finished: true}. If the animation is done because stop()
-was called on it before it could finish (e.g. because it was interrupted by a
-gesture or another animation), then it will receive {finished: false}.
Using the native driver #
By using the native driver, we send everything about the animation to native -before starting the animation, allowing native code to perform the animation -on the UI thread without having to go through the bridge on every frame. -Once the animation has started, the JS thread can be blocked without -affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your
-animation configuration. See the
-Animations guide to learn
-more.
Animatable components #
Only animatable components can be animated. These special components do the -magic of binding the animated values to the properties, and do targeted -native updates to avoid the cost of the react render and reconciliation -process on every frame. They also handle cleanup on unmount so they are safe -by default.
createAnimatedComponent()-can be used to make a component animatable.
Animated exports the following animatable components using the above
-wrapper:
Animated.ImageAnimated.ScrollViewAnimated.TextAnimated.View
Composing animations #
Animations can also be combined in complex ways using composition functions:
Animated.delay()starts an animation after -a given delay.Animated.parallel()starts a number of -animations at the same time.Animated.sequence()starts the animations -in order, waiting for each to complete before starting the next.Animated.stagger()starts animations in -order and in parallel, but with successive delays.
Animations can also be chained together simply by setting the toValue of
-one animation to be another Animated.Value. See
-Tracking dynamic values in
-the Animations guide.
By default, if one animation is stopped or interrupted, then all other -animations in the group are also stopped.
Combining animated values #
You can combine two animated values via addition, multiplication, division, -or modulo to make a new animated value:
Interpolation #
The interpolate() function allows input ranges to map to different output
-ranges. By default, it will extrapolate the curve beyond the ranges given,
-but you can also have it clamp the output value. It uses lineal interpolation
-by default but also supports easing functions.
Read more about interpolation in the -Animation guide.
Handling gestures and other events #
Gestures, like panning or scrolling, and other events can map directly to
-animated values using Animated.event(). This is done with a structured map
-syntax so that values can be extracted from complex event objects. The first
-level is an array to allow mapping across multiple args, and that array
-contains nested objects.
For example, when working with horizontal scrolling gestures, you would do
-the following in order to map event.nativeEvent.contentOffset.x to
-scrollX (an Animated.Value):
Methods #
static decay(value, config) #
Animates a value from an initial velocity to zero based on a decay -coefficient.
Config is an object that may have the following options:
velocity: Initial velocity. Required.deceleration: Rate of decay. Default 0.997.useNativeDriver: Uses the native driver when true. Default false.
static timing(value, config) #
Animates a value along a timed easing curve. The
-Easing module has tons of predefined curves, or you
-can use your own function.
Config is an object that may have the following options:
duration: Length of animation (milliseconds). Default 500.easing: Easing function to define curve. -Default isEasing.inOut(Easing.ease).delay: Start the animation after delay (milliseconds). Default 0.useNativeDriver: Uses the native driver when true. Default false.
static spring(value, config) #
Spring animation based on Rebound and
-Origami. Tracks velocity state to
-create fluid motions as the toValue updates, and can be chained together.
Config is an object that may have the following options:
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.useNativeDriver: Uses the native driver when true. Default false.
static add(a, b) #
Creates a new Animated value composed from two Animated values added +
Animated #
Animations are an important part of modern UX, and the Animated
+library 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
+via animations, such as Animated.timing, or by hooking into gestures like
+panning or scrolling via Animated.event. Animated.Value can also bind to
+props other than style, and can be interpolated as well. Here is a basic
+example of a container view that will fade in when it's mounted:
Note that only animatable components can be animated. View, Text, and
+Image are already provided, and you can create custom ones with
+createAnimatedComponent. These special components do the magic of binding
+the animated values to the properties, and do targeted native updates to
+avoid the cost of the react render and reconciliation process on every frame.
+They also handle cleanup on unmount so they are safe by default.
Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation.
A single Animated.Value can drive any number of properties, and each
+property can be run through an interpolation first. An interpolation maps
+input ranges to output ranges, typically using a linear interpolation but
+also supports easing functions. By default, it will extrapolate the curve
+beyond the ranges given, but you can also have it clamp the output value.
For example, you may want to think about your Animated.Value as going from
+0 to 1, but animate the position from 150px to 0px and the opacity from 0 to
+1. This can easily be done by modifying style in the example above like so:
Animations can also be combined in complex ways using composition functions
+such as sequence and parallel, and can also be chained together simply
+by setting the toValue of one animation to be another Animated.Value.
Animated.ValueXY is handy for 2D animations, like panning, and there are
+other helpful additions like setOffset and getLayout to aid with typical
+interaction patterns, like drag-and-drop.
You can see more example usage in AnimationExample.js, the Gratuitous
+Animation App, and Animations documentation guide.
Note that Animated is designed to be fully serializable so that animations
+can be run in a high performance way, independent of the normal JavaScript
+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.
+Checkout Animated.Value.addListener as 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, 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 Easing module 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 toValue updates, and can be chained together.
static add(a, b) #
Creates a new Animated value composed from two Animated values added together.
static divide(a, b) #
Creates a new Animated value composed by dividing the first Animated value by the second Animated value.
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 @@ -82,8 +74,8 @@ before starting the next. If the current running animation is stopped, no 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 stopTogether flag.
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 setValue on the mapped outputs. e.g.
static event(argMapping, config?) #
Takes an array of mappings and extracts values from each arg accordingly,
+ then calls setValue on the mapped outputs. e.g.
setValue on the mapped outputs. e.g.Config is an object that may have the following options:
listener: Optional async listener.useNativeDriver: Uses the native driver when true. Default false.
static createAnimatedComponent(Component) #
Make any React component Animatable. Used to create Animated.View, etc.
Properties #
Value: [object Object] #
Standard value class for driving animations. Typically initialized with
-new Animated.Value(0);
See also AnimatedValue.
ValueXY: [object Object] #
2D value class for driving 2D animations, such as pan gestures.
See also AnimatedValueXY.
Interpolation: [object Object] #
exported to use the Interpolation type in flow
See also AnimatedInterpolation.
class AnimatedValue #
Standard value for driving animations. One Animated.Value can drive
+ ]),
static createAnimatedComponent(Component) #
Make any React component Animatable. Used to create Animated.View, etc.
Properties #
class AnimatedValue #
Standard value for driving animations. One Animated.Value can 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 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 @@ -108,7 +100,7 @@ state to match the animation position with layout.
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 #
2D Value for driving 2D animations, such as pan gestures. Almost identical
API to normal Animated.Value, but multiplexed. Contains two regular
-Animated.Values under the hood.
Example #
Animated.Values under the hood. Example:Animated.Value, but multiplexed. Contains two regula
</Animated.View>
);
}
- }Methods #
constructor(valueIn?) #
setValue(value) #
setOffset(offset) #
flattenOffset() #
extractOffset() #
stopAnimation(callback?) #
addListener(callback) #
removeListener(id) #
removeAllListeners() #
getLayout() #
Converts {x, y} into {left, top} for use in style, e.g.
getTranslateTransform() #
Converts {x, y} into a useable translation transform, e.g.
Methods #
constructor(valueIn?) #
setValue(value) #
setOffset(offset) #
flattenOffset() #
stopAnimation(callback?) #
addListener(callback) #
removeListener(id) #
removeAllListeners() #
getLayout() #
Converts {x, y} into {left, top} for use in style, e.g.
getTranslateTransform() #
Converts {x, y} into a useable translation transform, e.g.
class AnimatedInterpolation #
Methods #
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Animations #
Animations are very important to create a great user experience. -Stationary objects must overcome inertia as they start moving. -Objects in motion have momentum and rarely come to a stop immediately. -Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems:
-Animated for granular and interactive control of specific values, and
-LayoutAnimation for animated global layout transactions.
Animated API #
The Animated API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way.
-Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
Animated exports four animatable component types: View, Text, Image, and ScrollView, but you can also create your own using Animated.createAnimatedComponent().
For example, a container view that fades in when it is mounted may look like this:
Animations #
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:
+LayoutAnimation for animated global layout transactions, and Animated for
+more granular and interactive control of specific values.
Animated #
The Animated library is designed to make it very easy to concisely express a
+wide variety of interesting animation and interaction patterns in a very
+performant way. Animated focuses on declarative relationships between inputs
+and outputs, with configurable transforms in between, and simple start/stop
+methods to control time-based animation execution. For example, a complete
+component with a simple spring bounce on mount looks like this:
You can then use your FadeInView in place of a View in your components, like so:
Let's break down what's happening here.
-In the FadeInView constructor, a new Animated.Value called fadeAnim is initialized as part of state.
-The opacity property on the View is mapped to this animated value.
-Behind the scenes, the numeric value is extracted and used to set opacity.
When the component mounts, the opacity is set to 0.
-Then, an easing animation is started on the fadeAnim animated value,
-which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.
This is done in an optimized way that is faster than calling setState and re-rendering.
Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
Configuring animations #
Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
Animated provides several animation types, the most commonly used one being Animated.timing().
-It supports animating a value over time using one of various predefined easing functions, or you can use your own.
-Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
By default, timing will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop.
-You can specify a different easing function by passing a easing parameter.
-Custom duration or even a delay before the animation starts is also supported.
For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
Composing animations #
Animations can be combined and played in sequence or in parallel.
-Sequential animations can play immediately after the previous animation has finished,
-or they can start after a specified delay.
-The Animated API provides several methods, such as sequence() and delay(),
-each of which simply take an array of animations to execute and automatically calls start()/stop() as needed.
For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
bounceValue is initialized as part of state in the constructor, and mapped
+to the scale transform on the image. Behind the scenes, the numeric value is
+extracted and used to set scale. When the component mounts, the scale is set to
+1.5 and then a spring animation is started on bounceValue which will update
+all of its dependent mappings on each frame as the spring animates (in this
+case, just the scale). This is done in an optimized way that is faster than
+calling setState and re-rendering. Because the entire configuration is
+declarative, we will be able to implement further optimizations that serialize
+the configuration and runs the animation on a high-priority thread.
Core API #
Most everything you need hangs directly off the Animated module. This
+includes two value types, Value for single values and ValueXY for vectors,
+three animation types, spring, decay, and timing, and three component
+types, View, Text, and Image. You can make any other component animated with
+Animated.createAnimatedComponent.
The three animation types can be used to create almost any animation curve you +want because each can be customized:
spring: Simple single-spring physics model that matches Origami.friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.
decay: Starts with an initial velocity and gradually slows to a stop.velocity: Initial velocity. Required.deceleration: Rate of decay. Default 0.997.
timing: Maps time range to easing value.duration: Length of animation (milliseconds). Default 500.easing: Easing function to define curve. SeeEasingmodule for several +predefined functions. iOS default isEasing.inOut(Easing.ease).delay: Start the animation after delay (milliseconds). Default 0.
Animations are started by calling start. start takes a completion callback
+that will be called when the animation is done. If the animation is done
+because it finished running normally, the completion callback will be invoked
+with {finished: true}, but if the animation is done because stop was called
+on it before it could finish (e.g. because it was interrupted by a gesture or
+another animation), then it will receive {finished: false}.
Composing Animations #
Animations can also be composed with parallel, sequence, stagger, and
+delay, each of which simply take an array of animations to execute and
+automatically calls start/stop as appropriate. For example:
If one animation is stopped or interrupted, then all other animations in the group are also stopped.
-Animated.parallel has a stopTogether option that can be set to false to disable this.
You can find a full list of composition methods in the Composing animations section of the Animated API reference.
Combining animated values #
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value.
There are some cases where an animated value needs to invert another animated value for calculation. -An example is inverting a scale (2x --> 0.5x):
Interpolation #
Each property can be run through an interpolation first. -An interpolation maps input ranges to output ranges, -typically using a linear interpolation but also supports easing functions. -By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
A simple mapping to convert a 0-1 range to a 0-100 range would be:
By default, if one animation is stopped or interrupted, then all other
+animations in the group are also stopped. Parallel has a stopTogether option
+that can be set to false to disable this.
Interpolation #
Another powerful part of the Animated API is the interpolate function. It
+allows input ranges to map to different output ranges. For example, a simple
+mapping to convert a 0-1 range to a 0-100 range would be
For example, you may want to think about your Animated.Value as going from 0 to 1,
-but animate the position from 150px to 0px and the opacity from 0 to 1.
-This can easily be done by modifying style from the example above like so:
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks.
-For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate supports multiple range segments as well, which is handy for
+defining dead zones and other handy tricks. For example, to get an negation
+relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then
+back down to zero at 100 followed by a dead-zone that remains at 0 for
+everything beyond that, you could do:
Which would map like so:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
Which would map like so:
| Input | Output |
|---|---|
| -400 | 450 |
| -300 | 300 |
| -200 | 150 |
| -100 | 0 |
| -50 | 0.5 |
| 0 | 1 |
| 50 | 0.5 |
| 100 | 0 |
| 101 | 0 |
| 200 | 0 |
interpolate also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the
-Easing module.
-interpolate() also has configurable behavior for extrapolating the outputRange.
-You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options.
-The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values #
Animated values can also track other values.
-Just set the toValue of an animation to another animated value instead of a plain number.
-For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking.
-They can also be composed with interpolations:
interpolation also supports arbitrary easing functions, many of which are
+already implemented in the
+Easing
+class including quadratic, exponential, and bezier curves as well as functions
+like step and bounce. interpolation also has configurable behavior for
+extrapolating the outputRange. You can set the extrapolation by setting the extrapolate,
+extrapolateLeft or extrapolateRight options. The default value is
+extend but you can use clamp to prevent the output value from exceeding
+outputRange.
Tracking Dynamic Values #
Animated values can also track other values. Just set the toValue of an
+animation to another animated value instead of a plain number, for example with
+spring physics for an interaction like "Chat Heads", or via timing with
+duration: 0 for rigid/instant tracking. They can also be composed with
+interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY().
-ValueXY is a handy way to deal with 2D interactions, such as panning or dragging.
-It is a simple wrapper that basically contains two Animated.Value instances and some helper functions that call through to them,
-making ValueXY a drop-in replacement for Value in many cases.
-It allows us to track both x and y values in the example above.
Tracking gestures #
Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event.
-This is done with a structured map syntax so that values can be extracted from complex event objects.
-The first level is an array to allow mapping across multiple args, and that array contains nested objects.
For example, when working with horizontal scrolling gestures,
-you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value):
When using PanResponder, you could use the following code to extract the x and y positions from gestureState.dx and gestureState.dy.
-We use a null in the first position of the array, as we are only interested in the second argument passed to the PanResponder handler,
-which is the gestureState.
ValueXY is a handy way to deal with 2D interactions, such as panning/dragging.
+It is a simple wrapper that basically just contains two Animated.Value
+instances and some helper functions that call through to them, making ValueXY
+a drop-in replacement for Value in many cases. For example, in the code
+snippet above, leader and follower could both be of type ValueXY and the x
+and y values will both track as you would expect.
Input Events #
Animated.event is the input side of the Animated API, allowing gestures and
+other events to map directly to animated values. This is done with a structured
+map syntax so that values can be extracted from complex event objects. The
+first level is an array to allow mapping across multiple args, and that array
+contains nested objects. In the example, you can see that scrollX maps to
+event.nativeEvent.contentOffset.x (event is normally the first arg to the
+handler), and pan.x and pan.y map to gestureState.dx and gestureState.dy,
+respectively (gestureState is the second arg passed to the PanResponder handler).
Responding to the current animation value #
You may notice that there is no obvious way to read the current value while animating. -This is because the value may only be known in the native runtime due to optimizations. -If you need to run JavaScript in response to the current value, there are two approaches:
spring.stopAnimation(callback)will stop the animation and invokecallbackwith the final value. This is useful when making gesture transitions.spring.addListener(callback)will invokecallbackasynchronously while the animation is running, providing a recent value. -This is useful for triggering state changes, -for example snapping a bobble to a new option as the user drags it closer, -because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
Animated is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript 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.
-Check out Animated.Value.addListener as a way to work around some of these limitations,
-but use it sparingly since it might have performance implications in the future.
Using the native driver #
The Animated API is designed to be serializable.
-By using the native driver,
-we send everything about the animation to native before starting the animation,
-allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame.
-Once the animation has started, the JS thread can be blocked without affecting the animation.
Using the native driver for normal animations is quite simple.
-Just add useNativeDriver: true to the animation config when starting it.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, -make sure every animation on that value also uses the native driver.
The native driver also works with Animated.event.
-This is specially useful for animations that follow the scroll position as without the native driver,
-the animation will always run a frame behind the gesture due to the async nature of React Native.
You can see the native driver in action by running the UIExplorer sample app, -then loading the Native Animated Example. -You can also take a look at the source code to learn how these examples were produced.
Caveats #
Not everything you can do with Animated is currently supported by the native driver.
-The main limitation is that you can only animate non-layout properties:
-things like transform, opacity and backgroundColor will work, but flexbox and position properties will not.
-When using Animated.event, it will only work with direct events and not bubbling events.
-This means it does not work with PanResponder but does work with things like ScrollView#onScroll.
Additional examples #
The UIExplorer sample app has various examples of Animated in use:
LayoutAnimation API #
LayoutAnimation allows you to globally configure create and update
+]);
Responding to the Current Animation Value #
You may notice that there is no obvious way to read the current value while +animating - this is because the value may only be known in the native runtime +due to optimizations. If you need to run JavaScript in response to the current +value, there are two approaches:
spring.stopAnimation(callback)will stop the animation and invokecallback+with the final value - this is useful when making gesture transitions.spring.addListener(callback)will invokecallbackasynchronously while the +animation is running, providing a recent value. This is useful for triggering +state changes, for example snapping a bobble to a new option as the user drags +it closer, because these larger state changes are less sensitive to a few frames +of lag compared to continuous gestures like panning which need to run at 60fps.
Future Work #
As previously mentioned, we're planning on optimizing Animated under the hood to +make it even more performant. We would also like to experiment with more +declarative and higher level gestures and triggers, such as horizontal vs. +vertical panning.
The above API gives a powerful tool for expressing all sorts of animations in a
+concise, robust, and performant way. Check out more example code in
+UIExplorer/AnimationExample. Of course there may still be times where Animated
+doesn't support what you need, and the following sections cover other animation
+systems.
LayoutAnimation #
LayoutAnimation allows you to globally configure create and update
animations that will be used for all views in the next render/layout cycle.
This is useful for doing flexbox layout updates without bothering to measure or
calculate specific properties in order to animate them directly, and is
@@ -230,12 +184,132 @@ what you want.
Note that in order to get this to work on Android} }
This example uses a preset value, you can customize the animations as you need, see LayoutAnimation.js -for more information.
Additional notes #
requestAnimationFrame #
requestAnimationFrame is a polyfill from the browser that you might be
+for more information.
requestAnimationFrame #
requestAnimationFrame is a polyfill from the browser that you might be
familiar with. It accepts a function as its only argument and calls that
function before the next repaint. It is an essential building block for
animations that underlies all of the JavaScript-based animation APIs. In
general, you shouldn't need to call this yourself - the animation APIs will
-manage frame updates for you.
setNativeProps #
As mentioned in the Direction Manipulation section, +manage frame updates for you.
react-tween-state (Not recommended - use Animated instead) #
react-tween-state is a
+minimal library that does exactly what its name suggests: it tweens a
+value in a component's state, starting at a from value and ending at
+a to value. This means that it generates the values in between those
+two values, and it sets the state on every requestAnimationFrame with
+the intermediary value.
Tweening definition from Wikipedia
"... tweening is the process of generating intermediate frames between two +images to give the appearance that the first image evolves smoothly +into the second image. [Tweens] are the drawings between the key +frames which help to create the illusion of motion."
The most obvious way to animate from one value to another is linearly: +you subtract the end value from the start value and divide the result by +the number of frames over which the animation occurs, and then add that +value to the current value on each frame until the end value is reached. +Linear easing often looks awkward and unnatural, so react-tween-state +provides a selection of popular easing functions +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
+--save from your project directory.
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
+similar in concept to react-tween-state: you have an initial value and
+set an end value, then Rebound generates intermediate values that you can
+use for your animation. Rebound is modeled after spring physics; we
+don't provide a duration when animating with springs, it is
+calculated for us depending on the spring tension, friction, current
+value and end value. Rebound is used
+internally
+by React Native on Navigator and WarningBox.
Notice that Rebound animations can be interrupted - if you release in +the middle of a press, it will animate back from the current state to +the original value.
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
+use this.
Screenshot from
+react-native-scrollable-tab-view.
+You can run a similar example here.
A sidenote about setNativeProps #
As mentioned in the Direction Manipulation section,
setNativeProps allows us to modify properties of native-backed
components (components that are actually backed by native views, unlike
composite components) directly, without having to setState and
@@ -275,7 +349,36 @@ computationally intensive work until after animations are complete,
using the
InteractionManager. You
can monitor the frame rate by using the In-App Developer Menu "FPS
-Monitor" tool.
You can edit the content above on GitHub and send us a pull request!
AppRegistry #
AppRegistry is the JS entry point to running all React Native apps. App
+
AppRegistry #
AppRegistry is the JS entry point to running all React Native apps. App
root components should register themselves with
AppRegistry.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 invoking
AppRegistry.unmountApplicationComponentAtRootTag with the tag that was
passed into runApplication. These should always be used as a pair.
AppRegistry should be required early in the require sequence to make
sure the JS execution environment is setup before other modules are
-required.
Methods #
static registerConfig(config) #
static registerComponent(appKey, component, section?) #
static registerRunnable(appKey, run) #
static registerSection(appKey, component) #
static getAppKeys() #
static getSectionKeys() #
static getSections() #
static getRunnable(appKey) #
static getRegistry() #
static runApplication(appKey, appParameters) #
static unmountApplicationComponentAtRootTag(rootTag) #
static registerHeadlessTask(taskKey, task) #
Register a headless task. A headless task is a bit of code that runs without a UI.
+required.
Methods #
static registerConfig(config) #
static registerComponent(appKey, getComponentFunc) #
static registerRunnable(appKey, func) #
static getAppKeys() #
static runApplication(appKey, appParameters) #
static unmountApplicationComponentAtRootTag(rootTag) #
static registerHeadlessTask(taskKey, task) #
Register a headless task. A headless task is a bit of code that runs without a UI. @param taskKey the key associated with this task @param task a promise returning function that takes some data passed from the native side as the only argument; when the promise is resolved or rejected the native side is @@ -28,6 +28,6 @@ sure the JS execution environment is setup before other modules are apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.43" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.42" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index 553953a05a5..51badfb3d4e 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -
AppState #
AppState can tell you if the app is in the foreground or background,
+
AppState #
AppState can 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 #
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 @@ -145,6 +145,6 @@ exports.examples \ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 9f0fab4a527..c970f7435c5 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage AsyncStorage #
AsyncStorageis a simple, unencrypted, asynchronous, persistent, key-value storage +AsyncStorage AsyncStorage #
AsyncStorageis a simple, unencrypted, 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
AsyncStorageinstead ofAsyncStoragedirectly for anything more than light usage since it operates globally.On iOS,
AsyncStorageis backed by native code that stores small values in a @@ -233,6 +233,6 @@ exports.examples \ No newline at end of file diff --git a/docs/backandroid.html b/docs/backandroid.html index 49bf8b2b0b6..8f5b416fe87 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid BackAndroid #
Detect hardware back button presses, and programmatically invoke the default back button +
BackAndroid BackAndroid #
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. The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called.
Example:
BackAndroid.addEventListener('hardwareBackPress', function() { @@ -26,6 +26,6 @@ and if one subscription returns true then subscriptions registered earlier will apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.43" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.42" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/button.html b/docs/button.html index e027fc6c805..43204a7cb51 100644 --- a/docs/button.html +++ b/docs/button.html @@ -1,4 +1,4 @@ -Button Button #
A basic button component that should render nicely on any platform. Supports +
Button Button #
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
If this button doesn't look right for your app, you can build your own @@ -10,7 +10,7 @@ Or, take a look at the ="Learn More" color="#841584" accessibilityLabel="Learn more about this purple button" -/>
Props #
accessibilityLabel?:
?string#Text to display for blindness accessibility features
color?:
?string#Color of the text (iOS), or background color of the button (Android)
disabled?:
?boolean#If true, disable all interactions for this component.
onPress:
() => any#Handler to be called when the user taps the button
testID?:
?string#Used to locate this view in end-to-end tests.
title:
string#Text to display inside the button
You can edit the content above on GitHub and send us a pull request!
Examples #
Edit on GitHub 'use strict'; +/>Props #
accessibilityLabel?: ?string #
Text to display for blindness accessibility features
color?: ?string #
Color of the text (iOS), or background color of the button (Android)
disabled?: ?boolean #
If true, disable all interactions for this component.
onPress: () => any #
Handler to be called when the user taps the button
testID?: ?string #
Used to locate this view in end-to-end tests.
title: string #
Text to display inside the button
You can edit the content above on GitHub and send us a pull request!
Examples #
Edit on GitHub 'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -113,6 +113,6 @@ exports.examples \ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 2a7ba893d29..1e556f4e792 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -CameraRoll CameraRoll #
CameraRollprovides access to the local camera roll / gallery. +CameraRoll CameraRoll #
CameraRollprovides access to the local camera roll / gallery. Before using this you must link theRCTCameraRolllibrary. You can refer to Linking for help.Permissions #
The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Fill out the
NSCameraUsageDescriptionkey in yourInfo.plistwith a string that describes how your @@ -6,7 +6,7 @@ app will use this data. This key will appear asPrivacy - Camera Usage Des or a local video file URI (remote or data URIs are not supported for saving video at this time).If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional
typeparameter that must be one of 'photo' or 'video'.Returns a Promise which will resolve with 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.Expects a params object of the following shape:
first: {number} : The number of photos wanted in reverse order of the photo application (i.e. most recent first for SavedPhotos).after: {string} : A cursor that matchespage_info { end_cursor }returned from a previous call togetPhotos.groupTypes: {string} : Specifies which group types to filter the results to. Valid values are:AlbumAllEventFacesLibraryPhotoStreamSavedPhotos// default
groupName: {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.assetType: {string} : Specifies filter on asset type. Valid values are:AllVideosPhotos// default
mimeTypes: {string} : Filter by mimetype (e.g. image/jpeg).
Returns a Promise which when resolved will be of the following shape:
edges: {Array<node>} An array of node objectsnode: {object} An object with the following shape:type: {string}group_name: {string}image: {object} : An object with the following shape:uri: {string}height: {number}width: {number}isStored: {boolean}
timestamp: {number}location: {object} : An object with the following shape:latitude: {number}longitude: {number}altitude: {number}heading: {number}speed: {number}
page_info: {object} : An object with the following shape:has_next_page: {boolean}start_cursor: {boolean}end_cursor: {boolean}
You can edit the content above on GitHub and send us a pull request!
Examples #
Edit on GitHub 'use strict'; +roll of the device matching shape defined bygetPhotosReturnChecker.@param {object} params See
getPhotosParamChecker.Returns a Promise which when resolved will be of shape
getPhotosReturnChecker.You can edit the content above on GitHub and send us a pull request!
Examples #
Edit on GitHub 'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -147,6 +147,6 @@ exports.examples \ No newline at end of file diff --git a/docs/clipboard.html b/docs/clipboard.html index a6027aeff6d..c9f87d9d217 100644 --- a/docs/clipboard.html +++ b/docs/clipboard.html @@ -1,4 +1,4 @@ -Clipboard Clipboard #
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 Clipboard #
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) #
Set content of string type. You can use following code to set clipboard content
_setContent() { Clipboard.setString('hello world'); @@ -66,6 +66,6 @@ exports.examples \ No newline at end of file diff --git a/docs/colors.html b/docs/colors.html index 4451dd3edf3..4b317191896 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Colors Colors #
The following formats are supported:
'#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)
For the named colors, React Native follows the CSS3 specification:
- 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)
You can edit the content above on GitHub and send us a pull request!
\ No newline at end of file diff --git a/docs/communication-ios.html b/docs/communication-ios.html index 543bf603f09..85fe4296234 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -Colors #
Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.
Red-green-blue #
React Native supports
rgb()andrgba()in both hexadecimal and functional notation:'#f0f'(#rgb)'#ff00ff'(#rrggbb)'rgb(255, 0, 255)''rgba(255, 255, 255, 1.0)''#f0ff'(#rgba)'#ff00ff00'(#rrggbbaa)
Hue-saturation-lightness #
hsl()andhsla()is supported in functional notation:'hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)'
transparent#This is a shortcut for
rgba(0,0,0,0):'transparent'
Named colors #
You can also use color names as values. React Native follows the CSS3 specification:
- 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)
You can edit the content above on GitHub and send us a pull request!
Communication between native and React Native Communication between native and React Native #
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 its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to 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 \ No newline at end of file diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html index 52d5b77a4a7..e2eae3f8293 100644 --- a/docs/datepickerandroid.html +++ b/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -Communication between native and React Native #
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}; @@ -33,8 +33,8 @@ AppRegistry. @"http://foo.com/bar4.png"]; rootView.appProperties = @{@"images" : imageList};It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.
There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
Note: -Currently, JS functions
componentWillReceivePropsandcomponentWillUpdatePropsof the top level RN component will not be called after a prop update. However, you can access the new props incomponentWillMountfunction.Passing properties from React Native to native #
The problem exposing properties of native components is covered in detail in this article. In short, export properties with
RCT_CUSTOM_VIEW_PROPERTYmacro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.Limits of properties #
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks (described here), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
Other ways of cross-language interaction (events and native modules) #
As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).
React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.
Calling React Native functions from native (events) #
Events are described in detail in this article. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
- As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
- Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, which makes them hard to debug.
- If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's
reactTagas an identifier).
The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.
Calling native functions from React Native (native modules) #
Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in this article.
The fact that native modules are singletons limits the mechanism in the context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.
Although this solution is complex, it is used in
RCTUIManager, which is an internal React Native class that manages all React Native views.Native modules can also be used to expose existing native libraries to JS. The Geolocation library is a living example of the idea.
Warning: -All native modules share the same namespace. Watch out for name collisions when creating new ones.
Layout computation flow #
When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.
Layout of a native component embedded in React Native #
This case is covered in this article. Basically, as all our native react views are subclasses of
UIView, most style and size attributes will work like you would expect out of the box.Layout of a React Native component embedded in native #
React Native content with fixed size #
The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.
For instance, to make an RN app 200 (logical) pixels high, and the hosting view's width wide, we could do:
// SomeViewController.m +Currently, JS functionscomponentWillReceivePropsandcomponentWillUpdatePropsof the top level RN component will not be called after a prop update. However, you can access the new props incomponentWillMountfunction.Passing properties from React Native to native #
The problem exposing properties of native components is covered in detail in this article. In short, export properties with
RCT_CUSTOM_VIEW_PROPERTYmacro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.Limits of properties #
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks (described here), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
Other ways of cross-language interaction (events and native modules) #
As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).
React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.
Calling React Native functions from native (events) #
Events are described in detail in this article. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
- As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
- Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, what makes them hard to debug.
- If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce some kind of identifiers and pass them along with events (you can use the native view's
reactTagas an identifier).
The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.
Calling native functions from React Native (native modules) #
Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in this article.
The fact that native modules are singletons limits the mechanism in context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.
Although this solution is complex, it is used in
RCTUIManager, which is an internal React Native class that manages all React Native views.Native modules can also be used to expose existing native libraries to JS. Geolocation library is a living example of the idea.
Warning: +All native modules share the same namespace. Watch out for name collisions when creating new ones.
Layout computation flow #
When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layouting problems and provides a brief description of mechanisms that are intended to address them.
Layout of a native component embedded in React Native #
This case is covered in this article. Basically, as all our native react views are subclasses of
UIView, most style and size attributes will work like you would expect out of the box.Layout of a React Native component embedded in native #
React Native content with fixed size #
The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.
For instance, to make an RN app 200 (logical) pixels high, and the hosting view's width wide, we could do:
// SomeViewController.m - (void)viewDidLoad { @@ -44,7 +44,7 @@ All native modules share the same namespace. Watch out for name collisions when initialProperties:props]; rootView.frame = CGRectMake(0, 0, self.view.width, 200); [self.view addSubview:rootView]; -}When we have a fixed size root view, we need to respect its bounds on the JS side. In other words, we need to ensure that the React Native content can be contained within the fixed-size root view. The easiest way to ensure this is to use flexbox layout. If you use absolute positioning, and React components are visible outside the root view's bounds, you'll get overlap with native views, causing some features to behave unexpectedly. For instance, 'TouchableHighlight' will not highlight your touches outside the root view's bounds.
It's totally fine to update root view's size dynamically by re-setting its frame property. React Native will take care of the content's layout.
React Native content with flexible size #
In some cases we'd like to render content of initially unknown size. Let's say the size will be defined dynamically in JS. We have two solutions to this problem.
- You can wrap your React Native view in a
ScrollViewcomponent. This guarantees that your content will always be available and it won't overlap with native views. - React Native allows you to determine, in JS, the size of the RN app and provide it to the owner of the hosting
RCTRootView. The owner is then responsible for re-laying out the subviews and keeping the UI consistent. We achieve this withRCTRootView's flexibility modes.
RCTRootViewsupports 4 different size flexibility modes:// RCTRootView.h +}When we have a fixed size root view, we need to respect its bounds on the JS side. In other words, we need to ensure that the React Native content can be contained within the fixed-size root view. The easiest way to ensure this is to use flexbox layout. If you use absolute positioning, and React components are visible outside the root view's bounds, you'll get overlap with native views, causing some features to behave unexpectedly. For instance, 'TouchableHighlight' will not highlight your touches outside the root view's bounds.
It's totally fine to update root view's size dynamically by re-setting its frame property. React Native will take care of the content's layout.
React Native content with flexible size #
In some cases we'd like to render content of initially unknown size. Let's say the size will be defined dynamically in JS. We have two solutions to this problem.
- You can wrap your React Native view in
ScrollViewcomponent. This guarantees that your content will always be available and it won't overlap with native views. - React Native allows you to determine, in JS, the size of the RN app and provide it to the owner of the hosting
RCTRootView. The owner is then responsible for re-laying out the subviews and keeping the UI consistent. We achieve this withRCTRootView's flexibility modes.
RCTRootViewsupports 4 different size flexibility modes:// RCTRootView.h typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) { RCTRootViewSizeFlexibilityNone = 0, @@ -71,10 +71,10 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F - (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView { CGRect newFrame = rootView.frame; - newFrame.size = rootView.intrinsicContentSize; + newFrame.size = rootView.intrinsicSize; rootView.frame = newFrame; -}In the example we have a
FlexibleSizeExampleViewview that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility toRCTRootViewSizeFlexibilityHeight, which means thatrootViewDidChangeIntrinsicSize:method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.You can checkout full source code of the example here.
It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate
rootViewDidChangeIntrinsicSize:method will be called once the content size is known.Note: React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
Note: React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use
UIView'shiddenproperty). Then change its visibility in the delegate method.You can edit the content above on GitHub and send us a pull request!
DatePickerAndroid DatePickerAndroid #
Opens the standard Android date picker dialog.
Example #
try { +DatePickerAndroid DatePickerAndroid #
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,14 @@ } } catch ({code, message}) { console.warn('Cannot open date picker', message); -}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 selectedmaxDate(Dateobject or timestamp in milliseconds) - minimum date that can be selectedmode(enum('calendar', 'spinner', 'default')) - To set the date-picker mode to calendar/spinner/default- 'calendar': Show a date picker in calendar mode.
- 'spinner': Show a date picker in spinner mode.
- 'default': Show a default native date picker(spinner/calendar) based on android versions.
Returns a Promise which will be invoked an object containing
action,year,month(0-11), +}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 default +minDate(Dateor timestamp in milliseconds) - minimum date that can be selected +maxDate(Dateobject or timestamp in milliseconds) - minimum date that can be selected +mode(enum('calendar', 'spinner', 'default')) - To set the date-picker mode to calendar/spinner/default + - 'calendar': Show a date picker in calendar mode. + - 'spinner': Show a date picker in spinner mode. + - 'default': Show a default native date picker(spinner/calendar) based on android versions.Returns a Promise which will be invoked an object containing
action,year,month(0-11),dayif the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action beingDatePickerAndroid.dismissedActionand all the other keys being undefined. Always check whether theactionbefore reading the values.Note the native date picker dialog has some UI glitches on Android 4 and lower @@ -153,6 +160,6 @@ module.exports \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 087bcc3a079..f4375e6c7e0 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,10 +1,10 @@ -
DatePickerIOS DatePickerIOS #
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +DatePickerIOS DatePickerIOS #
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 -source of truth.Props #
date:
Date#The currently selected date.
maximumDate?:
Date#Maximum date.
Restricts the range of possible date/time values.
minimumDate?:
Date#Minimum date.
Restricts the range of possible date/time values.
minuteInterval?:
enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)#The interval at which minutes can be selected.
mode?:
enum('date', 'time', 'datetime')#The date picker mode.
onDateChange:
function#Date change handler.
This is called when the user changes the date or time in the UI. +source of truth.
Props #
date: Date #
The currently selected date.
maximumDate?: Date #
Maximum date.
Restricts the range of possible date/time values.
minimumDate?: Date #
Minimum date.
Restricts the range of possible date/time values.
minuteInterval?: enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #
The interval at which minutes can be selected.
mode?: enum('date', 'time', 'datetime') #
The date picker mode.
onDateChange: function #
Date change handler.
This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new -date and time.
timeZoneOffsetInMinutes?:
number#Timezone offset in minutes.
By default, the date picker will use the device's timezone. With this +date and time.
timeZoneOffsetInMinutes?: number #
Timezone offset in minutes.
By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 * 60.
You can edit the content above on GitHub and send us a pull request!
Examples #
Edit on GitHub 'use strict'; @@ -171,6 +171,6 @@ exports.examples \ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index 68364d7ce64..28de1be6833 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -Debugging Debugging #
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the
Command⌘+Dkeyboard shortcut when your app is running in the iPhone Simulator, orCommand⌘+Mwhen running in an Android emulator.
The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press
Command⌘+Rin the iOS Simulator, or pressRtwice on Android emulators.If the
Command⌘+Rkeyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or theres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use
console.error()to manually trigger one.Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use
console.warn()to trigger a YellowBox.YellowBoxes can be disabled during development by using
console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:console.ignoredYellowBox = ['Warning: ...'];.In CI/Xcode, YellowBoxes can also be disabled by setting the
IS_TESTINGenvironment variable.RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Accessing console logs #
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
$ react-native log-ios +Debugging \ No newline at end of file diff --git a/docs/dimensions.html b/docs/dimensions.html index 43f7b6c5deb..bd1e5ea8bb9 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -1,14 +1,11 @@ -Debugging #
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the
Command⌘+Dkeyboard shortcut when your app is running in the iPhone Simulator, orCommand⌘+Mwhen running in an Android emulator.The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press
Command⌘+Rin the iOS Simulator, or pressRtwice on Android emulators.If the
Command⌘+Rkeyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or theres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use
console.error()to manually trigger one.Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use
console.warn()to trigger a YellowBox.YellowBoxes can be disabled during development by using
console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:console.ignoredYellowBox = ['Warning: ...'];.In CI/Xcode, YellowBoxes can also be disabled by setting the
IS_TESTINGenvironment variable.RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Accessing console logs #
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
$ react-native log-ios $ react-native log-androidYou may also access these through
Debug → Open System Log...in the iOS Simulator or by runningadb logcat *:S ReactNative:V ReactNativeJS:Vin a terminal while an Android app is running on a device or emulator.Chrome Developer Tools #
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Select
Tools → Developer Toolsfrom the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (Command⌘+Option⌥+Ion Mac,Ctrl+Shift+Ion Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.It is currently not possible to use the "React" tab in the Chrome Developer Tools to inspect app widgets. You can use Nuclide's "React Native Inspector" as a workaround.
Debugging on a device with Chrome Developer Tools #
On iOS devices, open the file
RCTWebSocketExecutor.mand change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.On Android 5.0+ devices connected via USB, you can use the
adbcommand line tool to setup port forwarding from the device to your computer:adb reverse tcp:8081 tcp:8081Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
Debugging using a custom JavaScript debugger #
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the
REACT_DEBUGGERenvironment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.The debugger will receive a list of all project roots, separated by a space. For example, if you set
REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the commandnode /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/appwill be used to start your debugger.Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
Debugging with Stetho on Android #
In
android/app/build.gradle, add these lines in thedependenciessection:compile 'com.facebook.stetho:stetho:1.3.1' compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'In
android/app/src/main/java/com/{yourAppName}/MainApplication.java, add the following imports:import com.facebook.react.modules.network.ReactCookieJarContainer; import com.facebook.stetho.Stetho; @@ -16,7 +16,7 @@ import java.util.addNetworkInterceptor(new StethoInterceptor()) .build(); OkHttpClientProvider.replaceOkHttpClient(client); -}Run
react-native run-androidIn a new chrome tab, open :
chrome://inspect, click on 'Inspect device' (the one followed by "Powered by Stetho")
Debugging native code #
When working with native code (e.g. when writing native modules) you can launch the app from Android Studio or Xcode and take advantage of the debugging features (setup breakpoints, etc.) as you would in case of building a standard native app.
Performance Monitor #
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
You can edit the content above on GitHub and send us a pull request!
Dimensions