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.
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}’.
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:
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!
AccessibilityInfo #
Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The +
AccessibilityInfo #
Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The
AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the
screen reader as well as to register to be notified when the state of the screen reader changes.
Here's a small example illustrating how to use AccessibilityInfo:
false otherwise.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
@@ -10,8 +10,8 @@ In this way, you can share images, videos, PDF files, etc.
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,
@@ -169,6 +169,6 @@ module.exports
\ No newline at end of file
diff --git a/docs/alertios.html b/docs/alertios.html
index 461975a8902..8beaf2b2cac 100644
--- a/docs/alertios.html
+++ b/docs/alertios.html
@@ -1,4 +1,4 @@
- Creating an iOS alert: An Alert button type Default alert with no inputs Plain text input alert Secure text input alert Login and password alert An Alert button style Default button style Cancel button style Destructive button style Array or buttons Button label Callback function when button pressed Button style You can edit the content above on GitHub and send us a pull request! An Alert button type Default alert with no inputs Plain text input alert Secure text input alert Login and password alert An Alert button style Default button style Cancel button style Destructive button style Array or buttons Button label Callback function when button pressed Button style Button label Callback function when button pressed Button style You can edit the content above on GitHub and send us a pull request! 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. Assuming you have the Android SDK installed, run Make sure you have the following installed: Step 1: Set environment variables through your local shell. Note: Files may vary based on shell flavor. See below for examples from common shells. Example: 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. Assuming you have the Android SDK installed, run Make sure you have the following installed: Step 1: Set environment variables through your local shell. Note: Files may vary based on shell flavor. See below for examples from common shells. Example: Step 2: Create a Example: You can find further instructions on the official page. First, you need to install Alternatively, you can clone the repo to your Add If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see Testing. Gradle build fails in You can edit the content above on GitHub and send us a pull request! 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 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. NOTE: Systrace support was added in react-native 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: 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. 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: HINT: Use the WASD keys to strafe and zoom 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. Scroll until you see (part of) the name of your package. In this case, I was profiling 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), 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 This is where JS is executed. The thread name will be either This is where native module calls (e.g. the 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 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. If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see 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 If you identified a native UI problem, there are usually two scenarios: 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 To mitigate this, you should: 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. 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. 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! The The The simplest workflow for creating an animation is to to create an
@@ -82,7 +82,10 @@ before starting the next. If the current running animation is stopped, no
following animations will be started. 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 Array of animations may run in parallel (overlap), but are started in
-sequence with successive delays. Nice for doing trailing effects. Takes an array of mappings and extracts values from each arg accordingly,
+sequence with successive delays. Nice for doing trailing effects. Loops a given animation continuously, so that each time it reaches the
+end, it resets and begins again from the start. Can specify number of
+times to loop using the key 'iterations' in the config. Will loop without
+blocking the UI thread if the child animation is set to 'useNativeDriver'. Takes an array of mappings and extracts values from each arg accordingly,
then calls Config is an object that may have the following options: Make any React component Animatable. Used to create Standard value class for driving animations. Typically initialized with
- See also 2D value class for driving 2D animations, such as pan gestures. See also exported to use the Interpolation type in flow See also Standard value for driving animations. One Config is an object that may have the following options: Make any React component Animatable. Used to create Imperative API to attach an animated value to an event on a view. Prefer using
+ Advanced imperative API for snooping on animated events that are passed in through props. Use
+values directly where possible. Standard value class for driving animations. Typically initialized with
+ See also 2D value class for driving 2D animations, such as pan gestures. See also exported to use the Interpolation type in flow See also Standard value for driving animations. One Directly set the value. This will stop any animations running on the value
@@ -104,7 +109,7 @@ The final output of the value is unchanged. Stops any running animation or tracking. Interpolates the value before updating the property, e.g. mapping 0-1 to
+state to match the animation position with layout. Stops any animation and resets the value to its original Interpolates the value before updating the property, e.g. mapping 0-1 to
0-10. Typically only used internally, but could be used by a custom Animation
class. Typically only used internally. Typically only used internally. 2D Value for driving 2D animations, such as pan gestures. Almost identical
API to normal Converts Converts Converts Converts You can edit the content above on GitHub and send us a pull request! Animations are very important to create a great user experience.
+ 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:
@@ -275,7 +275,7 @@ 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! Register a headless task. A headless task is a bit of code that runs without a UI.
+ 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.44" ], hitsPerPage: 5 }
});
\ No newline at end of file
diff --git a/docs/appstate.html b/docs/appstate.html
index 553953a05a5..67c152da096 100644
--- a/docs/appstate.html
+++ b/docs/appstate.html
@@ -1,4 +1,4 @@
- AppState is frequently used to determine the intent and proper behavior when
handling push notifications. It is recommended that you use an abstraction on top of On iOS, 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: You can edit the content above on GitHub and send us a pull request! Detect hardware button presses for back navigation. Android: 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. tvOS: Detect presses of the menu button on the TV remote. (Still to be implemented:
+programmatically disable menu button handling
+functionality to exit the app if there are no listeners or if none of the listeners return true.) iOS: Not applicable. 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: You can edit the content above on GitHub and send us a pull request! A basic button component that should render nicely on any platform. Supports
+ 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"
-/> Text to display for blindness accessibility features Color of the text (iOS), or background color of the button (Android) If true, disable all interactions for this component. Handler to be called when the user taps the button Used to locate this view in end-to-end tests. Text to display inside the button You can edit the content above on GitHub and send us a pull request! Text to display for blindness accessibility features Color of the text (iOS), or background color of the button (Android) If true, disable all interactions for this component. Handler to be called when the user taps the button Used to locate this view in end-to-end tests. Text to display inside the button You can edit the content above on GitHub and send us a pull request! The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
Fill out the Get content of string type, this method returns a Get content of string type, this method returns a Set content of string type. You can use following code to set clipboard content The following formats are supported: For the named colors, React Native follows the CSS3 specification: You can edit the content above on GitHub and send us a pull request! Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web. React Native supports This is a shortcut for You can also use color names as values. React Native follows the CSS3 specification: You can edit the content above on GitHub and send us a pull request! 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. 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 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. In order to embed a React Native view in a native component, we use 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. 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 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. In order to embed a React Native view in a native component, we use In the example we have a 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 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 You can edit the content above on GitHub and send us a pull request! Opens the standard Android date picker dialog. Opens the standard Android date picker dialog. Use Use The currently selected date. Maximum date. Restricts the range of possible date/time values. Minimum date. Restricts the range of possible date/time values. The interval at which minutes can be selected. The date picker mode. Date change handler. This is called when the user changes the date or time in the UI.
+source of truth. The currently selected date. Maximum date. Restricts the range of possible date/time values. Minimum date. Restricts the range of possible date/time values. The interval at which minutes can be selected. The date picker mode. 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. Timezone offset in minutes. By default, the date picker will use the device's timezone. With this
+date and time. 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! 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 The Developer Menu is disabled in release (production) builds. 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 If the 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: Errors and warnings are displayed inside your app in development builds. 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 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 YellowBoxes can be disabled during development by using In CI/Xcode, YellowBoxes can also be disabled by setting the RedBoxes and YellowBoxes are automatically disabled in release (production) builds. 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 supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked. 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 The Developer Menu is disabled in release (production) builds. 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 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: Errors and warnings are displayed inside your app in development builds. 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 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 YellowBoxes can be disabled during development by using In CI/Xcode, YellowBoxes can also be disabled by setting the RedBoxes and YellowBoxes are automatically disabled in release (production) builds. 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: You may also access these through 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 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. On iOS devices, open the file On Android 5.0+ devices connected via USB, you can use the Alternatively, 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. To use a custom JavaScript debugger in place of Chrome Developer Tools, set the The debugger will receive a list of all project roots, separated by a space. For example, if you set Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output. In In Run In a new chrome tab, open : 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. 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! This should only be called from native code by sending the
+ This should only be called from native code by sending the
didUpdateDimensions event. @param {object} dims Simple string-keyed object of dimensions to set Initial dimensions are set before Note: Although dimensions are available immediately, they may change (e.g
due to device rotation) so any rendering logic or styles that depend on
@@ -24,6 +24,6 @@ are the same as the return values of It is sometimes necessary to make changes directly to a component
+ It is sometimes necessary to make changes directly to a component
without using state/props to trigger a re-render of the entire subtree.
When using React in the browser for example, you sometimes need to
directly modify a DOM node, and the same is true for views in mobile
@@ -136,7 +136,7 @@ the jerky animation each 250ms when You can edit the content above on GitHub and send us a pull request! React component that wraps the platform React component that wraps the platform Example: Specifies the background color of the drawer. The default value is white.
+}, Specifies the background color of the drawer. The default value is white.
If you want to set the opacity of the drawer, use rgba. Example: Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+); Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
- locked-open, meaning that the drawer will stay opened and not respond to gestures.
-The drawer may still be opened and closed programmatically ( Specifies the side of the screen from which the drawer will slide in. Specifies the width of the drawer, more precisely the width of the view that be pulled in
-from the edge of the window. Determines whether the keyboard gets dismissed in response to a drag.
+The drawer may still be opened and closed programmatically ( Specifies the side of the screen from which the drawer will slide in. Specifies the width of the drawer, more precisely the width of the view that be pulled in
+from the edge of the window. Determines whether the keyboard gets dismissed in response to a drag.
- 'none' (the default), drags do not dismiss the keyboard.
- - 'on-drag', the keyboard is dismissed when a drag begins. Function called whenever the navigation view has been closed. Function called whenever the navigation view has been opened. Function called whenever there is an interaction with the navigation view. Function called when the drawer state has changed. The drawer can be in 3 states:
+ - 'on-drag', the keyboard is dismissed when a drag begins. Function called whenever the navigation view has been closed. Function called whenever the navigation view has been opened. Function called whenever there is an interaction with the navigation view. Function called when the drawer state has changed. The drawer can be in 3 states:
- idle, meaning there is no interaction with the navigation view happening at the time
- dragging, meaning there is currently an interaction with the navigation view
- settling, meaning that there was an interaction with the navigation view, and the
-navigation view is now finishing its closing or opening animation The navigation view that will be rendered to the side of the screen and can be pulled in. Make the drawer take the entire screen and draw the background of the
+navigation view is now finishing its closing or opening animation The navigation view that will be rendered to the side of the screen and can be pulled in. You can edit the content above on GitHub and send us a pull request! The The You can find a visualization of some common easing functions at
http://easings.net/ The You can <
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
- algoliaOptions: { facetFilters: [ "tags:0.43" ], hitsPerPage: 5 }
+ algoliaOptions: { facetFilters: [ "tags:0.44" ], hitsPerPage: 5 }
});
\ No newline at end of file
diff --git a/docs/flatlist.html b/docs/flatlist.html
index 148c28a1248..fbc8687a635 100644
--- a/docs/flatlist.html
+++ b/docs/flatlist.html
@@ -1,8 +1,62 @@
- A performant interface for rendering simple, flat lists, supporting the most handy features: If you need section support, use Minimal Example: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.Type Definitions #
AlertType #
$Enum
Constants:Value Description default plain-text secure-text login-password AlertButtonStyle #
$Enum
Constants:Value Description default cancel destructive ButtonsArray #
Array
Properties:Name and Type Description [text] [onPress] [style] Examples #
Edit on GitHub Type Definitions #
AlertType #
$Enum
Constants:Value Description default plain-text secure-text login-password AlertButtonStyle #
$Enum
Constants:Value Description default cancel destructive ButtonsArray #
Array
Properties:Name and Type Description [text] [onPress] [style]
Constants:Value Description text onPress style Examples #
Edit on GitHub Building React Native from source #
Prerequisites #
android to open the Android SDK Manager.build.gradle)build.gradle)Point Gradle to your Android SDK: #
.bash_profile or .bashrc.zprofile or .zshrc.profile or $ENVBuilding React Native from source #
Prerequisites #
android to open the Android SDK Manager.build.gradle)build.gradle)Point Gradle to your Android SDK: #
.bash_profile or .bashrc.zprofile or .zshrc.profile or $ENVlocal.properties file in the android directory of your react-native app with the following contents:Download links for Android NDK #
Building the source #
1. Installing the fork #
react-native from your fork. For example, to install the master branch from the official repo, run the following:node_modules directory and run npm install inside the cloned repo.2. Adding gradle dependencies #
gradle-download-task as dependency in android/build.gradle:Testing #
Troubleshooting #
ndk-build. See the section about local.properties file above.Profiling Android UI Performance #
__DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs (which you can view using adb logcat)Profiling with Systrace #
Collecting a trace #
v0.15. You will need to build with that version to collect a trace.time is the length of time the trace will be collected in secondssched, gfx, and view are the android SDK tags (collections of markers) we care about: sched gives you information about what's running on each core of your phone, gfx gives you graphics info such as frame boundaries, and view gives 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_name can be found in the AndroidManifest.xml of your app and looks like com.example.appReading the trace #
Enable VSync highlighting #
Find your process #
com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.UI Thread #
Choreographer, traversals, and DispatchUI:
JS Thread #
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 #
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 #
RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:
Identifying a culprit #
JS Issues #
RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:
Native UI Issues #
Too much GPU work #
DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.renderToHardwareTextureAndroid for complex, static content that is being animated/transformed (e.g. the Navigator slide/alpha animations)needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.Creating new views on the UI thread #
Still stuck? #
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..24db1a54fdc 100644
--- a/docs/animated.html
+++ b/docs/animated.html
@@ -1,4 +1,4 @@
-Animated #
Animated library is designed to make animations fluid, powerful, and
+Animated #
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.static parallel(animations, config?) #
stopTogether flag.static stagger(time, animations) #
static event(argMapping, config?) #
static loop(animation) #
static event(argMapping, config?) #
setValue on the mapped outputs. e.g.setValue on the mapped outputs. e.g.listener: Optional async listener.useNativeDriver: Uses the native driver when true. Default false.static createAnimatedComponent(Component) #
Animated.View, etc.Properties #
Value: [object Object] #
new Animated.Value(0);AnimatedValue.ValueXY: [object Object] #
AnimatedValueXY.Interpolation: [object Object] #
AnimatedInterpolation.class AnimatedValue #
Animated.Value can drive
+ ]),listener: Optional async listener.useNativeDriver: Uses the native driver when true. Default false.static createAnimatedComponent(Component) #
Animated.View, etc.static attachNativeEvent(viewRef, eventName, argMapping) #
Animated.event with useNativeDrive: true if possible.static forkEvent(event, listener) #
static unforkEvent(event, listener) #
Properties #
Value: AnimatedValue #
new Animated.Value(0);AnimatedValue.ValueXY: AnimatedValueXY #
AnimatedValueXY.Interpolation: AnimatedInterpolation #
AnimatedInterpolation.class AnimatedValue #
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) #
removeListener(id) #
removeAllListeners() #
stopAnimation(callback?) #
callback is invoked with the
final value after stopping the animation, which is useful for updating
-state to match the animation position with layout.interpolate(config) #
resetAnimation(callback?) #
interpolate(config) #
animate(animation, callback) #
stopTracking() #
track(tracking) #
class AnimatedValueXY #
Animated.Value, but multiplexed. Contains two regular
@@ -137,7 +142,7 @@ API to normal 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() #
{x, y} into {left, top} for use in style, e.g.getTranslateTransform() #
{x, y} into a useable translation transform, e.g.Methods #
constructor(valueIn?) #
setValue(value) #
setOffset(offset) #
flattenOffset() #
extractOffset() #
resetAnimation(callback?) #
stopAnimation(callback?) #
addListener(callback) #
removeListener(id) #
removeAllListeners() #
getLayout() #
{x, y} into {left, top} for use in style, e.g.getTranslateTransform() #
{x, y} into a useable translation transform, e.g.class AnimatedInterpolation #
Methods #
Examples #
Edit on GitHub Animations #
Animations #
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) #
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 setComponentProviderInstrumentationHook(hook) #
static runApplication(appKey, appParameters) #
static unmountApplicationComponentAtRootTag(rootTag) #
static registerHeadlessTask(taskKey, task) #
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.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..a29d694b35c 100644
--- a/docs/asyncstorage.html
+++ b/docs/asyncstorage.html
@@ -1,4 +1,4 @@
-AsyncStorage #
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage
+AsyncStorage #
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage
system that is global to the app. It should be used instead of LocalStorage.AsyncStorage
instead of AsyncStorage directly for anything more than light usage since
it operates globally.AsyncStorage is 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..9bd37022ec4 100644
--- a/docs/backandroid.html
+++ b/docs/backandroid.html
@@ -1,16 +1,4 @@
-BackAndroid #
Methods #
BackHandler #
Methods #
Button #
Button #
Props #
accessibilityLabel?:
?string #color?:
?string #disabled?:
?boolean #onPress:
() => any #testID?:
?string #title:
string #Examples #
Edit on GitHub Props #
accessibilityLabel?: ?string #
color?: ?string #
disabled?: ?boolean #
onPress: () => any #
testID?: ?string #
title: string #
Examples #
Edit on GitHub CameraRoll #
CameraRoll provides access to the local camera roll / gallery.
+CameraRoll #
CameraRoll provides access to the local camera roll / gallery.
Before using this you must link the RCTCameraRoll library.
You can refer to Linking for help.Permissions #
NSCameraUsageDescription key in your Info.plist with a string that describes how your
@@ -131,7 +131,7 @@ exports.examples : 'Photos',
render(): React.Element<any> { return <CameraRollExample />; }
}
-];Clipboard #
Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString() #
Promise, so you can use following code to get clipboard contentClipboard #
Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString() #
Promise, so you can use following code to get clipboard contentstatic setString(content) #
Colors #
'#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)Colors #
Red-green-blue #
rgb() and rgba() 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() and hsla() is supported in functional notation:'hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)'transparent #rgba(0,0,0,0):'transparent'Named colors #
Communication between native and React Native #
Introduction #
Properties #
Passing properties from native to React Native #
RCTRootView. RCTRootView is a UIView that holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootView has an initializer that allows you to pass arbitrary properties down to the React Native app. The initialProperties parameter has to be an instance of NSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.Communication between native and React Native #
Introduction #
Properties #
Passing properties from native to React Native #
RCTRootView. RCTRootView is a UIView that holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootView has an initializer that allows you to pass arbitrary properties down to the React Native app. The initialProperties parameter has to be an instance of NSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.FlexibleSizeExampleView view 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 to RCTRootViewSizeFlexibilityHeight, which means that rootViewDidChangeIntrinsicSize: 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.rootViewDidChangeIntrinsicSize: method will be called once the content size is known.UIView's hidden property). Then change its visibility in the delegate method.DatePickerAndroid #
Example #
DatePickerAndroid #
Example #
DatePickerIOS #
DatePickerIOS to render a date/time picker (selector) on iOS. This is
+DatePickerIOS #
DatePickerIOS to render a date/time picker (selector) on iOS. This is
a controlled component, so you must hook in to the onDateChange callback
and update the date prop in order for the component to update, otherwise
the user's change will be reverted immediately to reflect props.date as the
-source of truth.Props #
date:
Date #maximumDate?:
Date #minimumDate?:
Date #minuteInterval?:
enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #mode?:
enum('date', 'time', 'datetime') #onDateChange:
function #Props #
date: Date #
maximumDate?: Date #
minimumDate?: Date #
minuteInterval?: enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #
mode?: enum('date', 'time', 'datetime') #
onDateChange: function #
timeZoneOffsetInMinutes?:
number #timeZoneOffsetInMinutes?: number #
Examples #
Edit on GitHub Debugging #
Accessing the In-App Developer Menu #
Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.
Reloading JavaScript #
Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.Command⌘ + R keyboard 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 #
Images.xcassets on iOS or the res/drawable folder on Android.In-app Errors and Warnings #
Errors #
console.error() to manually trigger one.Warnings #
console.warn() to trigger a YellowBox.console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.IS_TESTING environment variable.Accessing console logs #
Debugging #
Enabling Keyboard Shortcuts #
Accessing the In-App Developer Menu #
Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.Reloading JavaScript #
Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.Automatic reloading #
Images.xcassets on iOS or the res/drawable folder on Android.In-app Errors and Warnings #
Errors #
console.error() to manually trigger one.Warnings #
console.warn() to trigger a YellowBox.console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.IS_TESTING environment variable.Accessing console logs #
Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.Chrome Developer Tools #
Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.Debugging on a device with Chrome Developer Tools #
RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.adb command line tool to setup port forwarding from the device to your computer:adb reverse tcp:8081 tcp:8081Debugging using a custom JavaScript debugger #
REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the command node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app will be used to start your debugger.Debugging with Stetho on Android #
android/app/build.gradle, add these lines in the dependencies section:android/app/src/main/java/com/{yourAppName}/MainApplication.java, add the following imports:react-native run-androidchrome://inspect, click on 'Inspect device' (the one followed by "Powered by Stetho")Debugging native code #
Performance Monitor #
Dimensions #
Methods #
static set(dims) #
Dimensions #
Methods #
static set(dims) #
static get(dim) #
runApplication is called so they should
be available before any other require's are run, but may be updated later.Dimensions.get('window')
\ No newline at end of file
diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html
index bfa21e2910b..ca9b244705c 100644
--- a/docs/direct-manipulation.html
+++ b/docs/direct-manipulation.html
@@ -1,4 +1,4 @@
-Direct Manipulation #
Direct Manipulation #
setState triggers a re-render.<
shouldComponentUpdate
you can avoid the unnecessary overhead involved in reconciling unchanged
component subtrees, to the point where it may be performant enough to
-use setState instead of setNativeProps.DrawerLayoutAndroid #
DrawerLayout (Android only). The
+DrawerLayoutAndroid #
DrawerLayout (Android only). The
Drawer (typically used for navigation) is rendered with renderNavigationView
and direct children are the main view (where your content goes). The navigation
view is initially not visible on the screen, but can be pulled in from the
@@ -20,22 +20,22 @@ be set by the drawerWidth prop.Props #
drawerBackgroundColor?:
[object Object] #Props #
drawerBackgroundColor?: color #
drawerLockMode?:
enum('unlocked', 'locked-closed', 'locked-open') #drawerLockMode?: enum('unlocked', 'locked-closed', 'locked-open') #
openDrawer/closeDrawer).drawerPosition?:
enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #drawerWidth?:
number #keyboardDismissMode?:
enum('none', 'on-drag') #openDrawer/closeDrawer).drawerPosition?: enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #
drawerWidth?: number #
keyboardDismissMode?: enum('none', 'on-drag') #
onDrawerClose?:
function #onDrawerOpen?:
function #onDrawerSlide?:
function #onDrawerStateChanged?:
function #onDrawerClose?: function #
onDrawerOpen?: function #
onDrawerSlide?: function #
onDrawerStateChanged?: function #
renderNavigationView:
function #statusBarBackgroundColor?:
[object Object] #renderNavigationView: function #
Methods #
Easing #
Easing module implements common easing functions. This module is used
+Easing #
Easing module implements common easing functions. This module is used
by Animate.timing() to convey physically
believable motion in animations.Predefined animations #
Easing module provides several predefined animations through the
@@ -33,6 +33,6 @@ duration.FlatList #
<SectionList>.
