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.
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:
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 Displays a circular loading indicator. Whether to show the indicator (true, the default) or hide it (false). Size of the indicator (default is 'small').
+ Displays a circular loading indicator. Whether to show the indicator (true, the default) or hide it (false). Size of the indicator (default is 'small').
Passing a number to the size prop is only supported on Android. 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! You can edit the content above on GitHub and send us a pull request! You can edit the content above on GitHub and send us a pull request! Launches an alert dialog with the specified title and message. Optionally provide a list of buttons. Tapping any button will fire the
+ 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 On iOS you can specify any number of buttons. Each button can optionally
specify a style, which is one of 'default', 'cancel' or 'destructive'. On Android at most three buttons can be specified. Android has a concept
-of a neutral, negative and a positive button: 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 Example usage: You can edit the content above on GitHub and send us a pull request! Creating an iOS alert: 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 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! 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! Animations are an important part of modern UX, and the Animations are an important part of modern UX, and the The simplest workflow is to create an Fluid, meaningful animations are essential to the mobile user experience. Like
+ 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:
To "stop" an application when a view should be destroyed, call
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
@@ -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.40" ], hitsPerPage: 5 }
+ algoliaOptions: { facetFilters: [ "tags:0.41" ], hitsPerPage: 5 }
});
\ No newline at end of file
diff --git a/docs/appstate.html b/docs/appstate.html
index cd38b3031a8..c7b9c5c62c4 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
+ 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: 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
@@ -113,6 +113,6 @@ exports.examples
\ No newline at end of file
diff --git a/docs/cameraroll.html b/docs/cameraroll.html
index a554561e94c..23a39631074 100644
--- a/docs/cameraroll.html
+++ b/docs/cameraroll.html
@@ -1,6 +1,8 @@
- Saves the photo or video to the camera roll / gallery. On Android, the tag must be a local image or video URI, such as On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs)
+You can refer to Linking for help. The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
+Fill out the Saves the photo or video to the camera roll / gallery. On Android, the tag must be a local image or video URI, such as On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs)
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
Returns a Promise which will resolve with the new URI. Returns a Promise with photo identifier objects from the local camera
@@ -145,6 +147,6 @@ exports.examples
\ No newline at end of file
diff --git a/docs/clipboard.html b/docs/clipboard.html
index eab94865a28..194f2e8741f 100644
--- a/docs/clipboard.html
+++ b/docs/clipboard.html
@@ -1,4 +1,4 @@
- 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! 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! 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 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 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 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 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 Opens the standard Android date picker dialog. Opens the standard Android date picker dialog. Use Use url points to a local file, or is a base64-encoded
@@ -220,6 +220,6 @@ exports.examples
\ No newline at end of file
diff --git a/docs/activityindicator.html b/docs/activityindicator.html
index ea8c92c0b85..ff0301f9048 100644
--- a/docs/activityindicator.html
+++ b/docs/activityindicator.html
@@ -1,4 +1,4 @@
-ActivityIndicator #
Props #
animating bool #
size enum('small', 'large'), number #
ActivityIndicator #
Props #
animating bool #
size enum('small', 'large'), number #
ioshidesWhenStopped bool #
Examples #
Edit on GitHub AdSupportIOS #
Methods #
Examples #
Edit on GitHub AdSupportIOS #
Methods #
Examples #
Edit on GitHub Alert #
Alert #
AlertIOS; entering text in an alert is common on iOS only.iOS #
Android #
options parameter { cancelable: false } to the Alert method.Methods #
static alert(title, message?, buttons?, options?, type?) #
Examples #
Edit on GitHub 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.Building React Native from source #
Prerequisites #
android to open the Android SDK Manager.build.gradle)build.gradle)Android Support Repository) >= 17 (for Android Support Library)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: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? #
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? #
Animated #
Animated
+Animated #
Animated
library is designed to make them fluid, powerful, and easy to build and
maintain.Animated.Value, hook it up to one or
more style attributes of an animated component, and then drive updates either
@@ -367,6 +367,6 @@ exports.examples
\ No newline at end of file
diff --git a/docs/animations.html b/docs/animations.html
index 937e7011ce3..d9b64374d23 100644
--- a/docs/animations.html
+++ b/docs/animations.html
@@ -1,4 +1,4 @@
-Animations #
Animations #
LayoutAnimation for animated global layout transactions, and Animated for
@@ -394,6 +394,6 @@ source.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
AppRegistry.runApplication.AppRegistry.unmountApplicationComponentAtRootTag with the tag that was
-pass into runApplication. These should always be used as a pair.AppRegistry should be required early in the require sequence to make
+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, getComponentFunc) #
static registerRunnable(appKey, func) #
static getAppKeys(0) #
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
@@ -133,6 +133,6 @@ exports.examples
\ No newline at end of file
diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html
index 5338f828c58..6252d716dfe 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 52bffce526e..a622883e5ef 100644
--- a/docs/backandroid.html
+++ b/docs/backandroid.html
@@ -1,4 +1,4 @@
-BackAndroid #
BackAndroid #
Button #
Button #
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.Methods #
static saveImageWithTag(tag) #
static saveToCameraRoll(tag, type?) #
"file:///sdcard/img.png".Permissions #
NSCameraUsageDescription key in your Info.plist with a string that describes how your
+app will use this data. This key will appear as Privacy - Camera Usage Description in Xcode.Methods #
static saveImageWithTag(tag) #
static saveToCameraRoll(tag, type?) #
"file:///sdcard/img.png".type parameter that must be one of 'photo' or 'video'.static getPhotos(params) #
Clipboard #
Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString(0) #
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(0) #
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 #
'#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)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.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
@@ -171,6 +171,6 @@ exports.examples
\ No newline at end of file
diff --git a/docs/debugging.html b/docs/debugging.html
index 86e438a4d2c..f6aee392a6a 100644
--- a/docs/debugging.html
+++ b/docs/debugging.html
@@ -1,4 +1,4 @@
-