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:
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
diff --git a/docs/activityindicator.html b/docs/activityindicator.html
index 1bdd260612c..559e100fde4 100644
--- a/docs/activityindicator.html
+++ b/docs/activityindicator.html
@@ -1,4 +1,4 @@
-
ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: PropTypes.bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: PropTypes.oneOfType([
+ActivityIndicator ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: PropTypes.bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: PropTypes.oneOfType([
PropTypes.oneOf([ 'small', 'large' ]),
PropTypes.number,
]) #
Size of the indicator (default is 'small').
diff --git a/docs/adsupportios.html b/docs/adsupportios.html
index 52e6c45b4e3..db9b76c624c 100644
--- a/docs/adsupportios.html
+++ b/docs/adsupportios.html
@@ -1,4 +1,4 @@
-
AdSupportIOS AdSupportIOS #
AdSupport provides access to the "advertising identifier". If you link this library
+
AdSupportIOS AdSupportIOS #
AdSupport provides access to the "advertising identifier". If you link this library
in your project, you may need to justify your use for this identifier when submitting
your application to the App Store.
In order to use AdSupport in your project, you must link the RCTAdSupport library.
In Xcode, you can manually add the RCTAdSupport.m and RCTAdSupport.h files from
diff --git a/docs/alert.html b/docs/alert.html
index 15f32b83bb1..b855b98e1a4 100644
--- a/docs/alert.html
+++ b/docs/alert.html
@@ -1,4 +1,4 @@
-
Alert Alert #
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the
+
Alert 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,
diff --git a/docs/alertios.html b/docs/alertios.html
index 321d46210ad..78598d35ced 100644
--- a/docs/alertios.html
+++ b/docs/alertios.html
@@ -1,4 +1,4 @@
-
AlertIOS AlertIOS #
AlertIOS provides functionality to create an iOS alert dialog with a
+
AlertIOS AlertIOS #
AlertIOS provides functionality to create an iOS alert dialog with a
message or create a prompt for user input.
Creating an iOS alert:
AlertIOS.alert(
'Sync Complete',
'All your data are belong to us.'
diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html
index ba1d4435071..169a543ec82 100644
--- a/docs/android-building-from-source.html
+++ b/docs/android-building-from-source.html
@@ -1,4 +1,4 @@
-Building React Native from source Building React Native from source #
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Android Support Repository >= 17 (for Android Support Library)
- Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: #
Step 1: Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash:
.bash_profile or .bashrc - zsh:
.zprofile or .zshrc - ksh:
.profile or $ENV
Example:
export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
+Building React Native from source Building React Native from source #
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Android Support Repository >= 17 (for Android Support Library)
- Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: #
Step 1: Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash:
.bash_profile or .bashrc - zsh:
.zprofile or .zshrc - ksh:
.profile or $ENV
Example:
export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10eStep 2: Create a local.properties file in the android directory of your react-native app with the following contents:
Example:
sdk.dir=/Users/your_unix_name/android-sdk-macosx
ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10eDownload links for Android NDK #
- Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
- Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
- Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
- Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip
You can find further instructions on the official page.
Building the source #
1. Installing the fork #
First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:
npm install --save github:facebook/react-native#masterAlternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.
2. Adding gradle dependencies #
Add gradle-download-task as dependency in android/build.gradle:
...
dependencies {
@@ -28,7 +28,7 @@ dependencies {
rootProject.allprojects {
buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
}
-}Building for Maven/Nexus deployment #
If you find that you need to push up a locally compiled React Native .aar and related files to a remote Nexus repository, you can.
Start by following the Point Gradle to your Android SDK section of this page. Once you do this, assuming you have Gradle configured properly, you can then run the following command from the root of your React Native checkout to build and package all required files:
./gradlew ReactAndroid:installArchivesThis will package everything that would typically be included in the android directory of your node_modules/react-native/ installation in the root directory of your React Native checkout.
Testing #
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.
Troubleshooting #
Gradle build fails in ndk-build. See the section about local.properties file above.
You can edit the content above on GitHub and send us a pull request!
Animated #
The Animated library is designed to make animations fluid, powerful, and
+
Animated Animated #
The Animated library is designed to make animations fluid, powerful, and
easy to build and maintain. Animated focuses on declarative relationships
between inputs and outputs, with configurable transforms in between, and
simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an
diff --git a/docs/animations.html b/docs/animations.html
index ad0b5eea99d..5968c8c4776 100644
--- a/docs/animations.html
+++ b/docs/animations.html
@@ -1,4 +1,4 @@
-
Animations Animations #
Animations are very important to create a great user experience.
+
Animations Animations #
Animations are very important to create a great user experience.
Stationary objects must overcome inertia as they start moving.
Objects in motion have momentum and rarely come to a stop immediately.
Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems:
@@ -285,7 +285,7 @@ option.
You may also want to defer any computationally intensive work until after
animations are complete, using the
InteractionManager. You can monitor the
-frame rate by using the In-App Developer Menu "FPS Monitor" tool.
You can edit the content above on GitHub and send us a pull request!
AppRegistry #
+AppRegistry AppRegistry #
Project with Native Code Required
This API only works in projects made with react-native init
diff --git a/docs/appstate.html b/docs/appstate.html
index 4c78200b1e8..c5f9d59b853 100644
--- a/docs/appstate.html
+++ b/docs/appstate.html
@@ -1,4 +1,4 @@
-
AppState AppState #
AppState can tell you if the app is in the foreground or background,
+
AppState AppState #
AppState can tell you if the app is in the foreground or background,
and notify you when the state changes.
AppState is frequently used to determine the intent and proper behavior when
handling push notifications.
App States #
active - The app is running in the foregroundbackground - The app is running in the background. The user is either
in another app or on the home screeninactive - This is a state that occurs when transitioning between
diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html
index c801f35ced9..53e506c77a7 100644
--- a/docs/asyncstorage.html
+++ b/docs/asyncstorage.html
@@ -1,4 +1,4 @@
-AsyncStorage AsyncStorage #
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage
+
AsyncStorage 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.
It is recommended that you use an abstraction on top of AsyncStorage
instead of AsyncStorage directly for anything more than light usage since
it operates globally.
On iOS, AsyncStorage is backed by native code that stores small values in a
diff --git a/docs/backandroid.html b/docs/backandroid.html
index a1ec5335469..a7f4b721c61 100644
--- a/docs/backandroid.html
+++ b/docs/backandroid.html
@@ -1,4 +1,4 @@
-
BackAndroid BackHandler #
Detect hardware button presses for back navigation.
Android: Detect hardware back button presses, and programmatically invoke the default back button
+
BackHandler BackHandler #
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),
diff --git a/docs/building-for-apple-tv.html b/docs/building-for-apple-tv.html
index 1e8af6a2fcf..4912d5082a6 100644
--- a/docs/building-for-apple-tv.html
+++ b/docs/building-for-apple-tv.html
@@ -1,4 +1,4 @@
-
Building For Apple TV Building For Apple TV #
Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.
The RNTester app supports Apple TV; use the RNTester-tvOS build target to build for tvOS.
Build changes #
Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
react-native init: New React Native projects created with react-native init will have Apple TV target automatically created in their XCode projects.
JavaScript layer: Support for Apple TV has been added to Platform.ios.js. You can check whether code is running on AppleTV by doing
var Platform = require('Platform');
+Building For Apple TV Building For Apple TV #
Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.
The RNTester app supports Apple TV; use the RNTester-tvOS build target to build for tvOS.
Build changes #
Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
react-native init: New React Native projects created with react-native init will have Apple TV target automatically created in their XCode projects.
JavaScript layer: Support for Apple TV has been added to Platform.ios.js. You can check whether code is running on AppleTV by doing
var Platform = require('Platform');
var running_on_apple_tv = Platform.isTVOS;Code changes #
General support for tvOS: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableHighlight and TouchableOpacity will "just work". In particular:
touchableHandleActivePressIn will be executed when the touchable view goes into focustouchableHandleActivePressOut will be executed when the touchable view goes out of focustouchableHandlePress will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
TV remote/keyboard input: A new native class, RCTTVRemoteHandler, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by RCTTVNavigationEventEmitter (a subclass of RCTEventEmitter), that fires a JS event. This event will be picked up by instances of the TVEventHandler JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of TVEventHandler and listen for these events, as in the following code:
var TVEventHandler = require('TVEventHandler');
.
@@ -38,7 +38,7 @@ class Game2048 extends componentWillUnmount() {
this._disableTVEventHandler();
- }TV remote animations: RCTTVView native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
Back navigation with the TV remote menu button: The BackHandler component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
Known issues:
- ListView scrolling. The issue can be easily worked around by setting
removeClippedSubviews to false in ListView and similar components. For more discussion of this issue, see this PR.
You can edit the content above on GitHub and send us a pull request!
Button #
A basic button component that should render nicely on any platform. Supports
+
Button Button #
A basic button component that should render nicely on any platform. Supports
a minimal level of customization.
If this button doesn't look right for your app, you can build your own
diff --git a/docs/cameraroll.html b/docs/cameraroll.html
index e26642f657b..3822277c001 100644
--- a/docs/cameraroll.html
+++ b/docs/cameraroll.html
@@ -1,4 +1,4 @@
-
CameraRoll CameraRoll #
CameraRoll provides access to the local camera roll / gallery.
+
CameraRoll 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 #
The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
Add the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your
diff --git a/docs/clipboard.html b/docs/clipboard.html
index 071d2d06ff7..1d86c09e40f 100644
--- a/docs/clipboard.html
+++ b/docs/clipboard.html
@@ -1,4 +1,4 @@
-
Clipboard Clipboard #
Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android
Methods #
static getString() #
Get content of string type, this method returns a Promise, so you can use following code to get clipboard content
async _getContent() {
+Clipboard Clipboard #
Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android
Methods #
static getString() #
Get content of string type, this method returns a Promise, so you can use following code to get clipboard content
async _getContent() {
var content = await Clipboard.getString();
}static setString(content) #
Set content of string type. You can use following code to set clipboard content
_setContent() {
Clipboard.setString('hello world');
diff --git a/docs/colors.html b/docs/colors.html
index b6e8dbcfa0c..bcf82be68e6 100644
--- a/docs/colors.html
+++ b/docs/colors.html
@@ -1,4 +1,4 @@
-Colors Colors #
Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.
Red-green-blue #
React Native supports rgb() 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 #
This is a shortcut for rgba(0,0,0,0):
'transparent'
Named colors #
You can also use color names as values. React Native follows the CSS3 specification:
- aliceblue (#f0f8ff)
- antiquewhite (#faebd7)
- aqua (#00ffff)
- aquamarine (#7fffd4)
- azure (#f0ffff)
- beige (#f5f5dc)
- bisque (#ffe4c4)
- black (#000000)
- blanchedalmond (#ffebcd)
- blue (#0000ff)
- blueviolet (#8a2be2)
- brown (#a52a2a)
- burlywood (#deb887)
- cadetblue (#5f9ea0)
- chartreuse (#7fff00)
- chocolate (#d2691e)
- coral (#ff7f50)
- cornflowerblue (#6495ed)
- cornsilk (#fff8dc)
- crimson (#dc143c)
- cyan (#00ffff)
- darkblue (#00008b)
- darkcyan (#008b8b)
- darkgoldenrod (#b8860b)
- darkgray (#a9a9a9)
- darkgreen (#006400)
- darkgrey (#a9a9a9)
- darkkhaki (#bdb76b)
- darkmagenta (#8b008b)
- darkolivegreen (#556b2f)
- darkorange (#ff8c00)
- darkorchid (#9932cc)
- darkred (#8b0000)
- darksalmon (#e9967a)
- darkseagreen (#8fbc8f)
- darkslateblue (#483d8b)
- darkslategrey (#2f4f4f)
- darkturquoise (#00ced1)
- darkviolet (#9400d3)
- deeppink (#ff1493)
- deepskyblue (#00bfff)
- dimgray (#696969)
- dimgrey (#696969)
- dodgerblue (#1e90ff)
- firebrick (#b22222)
- floralwhite (#fffaf0)
- forestgreen (#228b22)
- fuchsia (#ff00ff)
- gainsboro (#dcdcdc)
- ghostwhite (#f8f8ff)
- gold (#ffd700)
- goldenrod (#daa520)
- gray (#808080)
- green (#008000)
- greenyellow (#adff2f)
- grey (#808080)
- honeydew (#f0fff0)
- hotpink (#ff69b4)
- indianred (#cd5c5c)
- indigo (#4b0082)
- ivory (#fffff0)
- khaki (#f0e68c)
- lavender (#e6e6fa)
- lavenderblush (#fff0f5)
- lawngreen (#7cfc00)
- lemonchiffon (#fffacd)
- lightblue (#add8e6)
- lightcoral (#f08080)
- lightcyan (#e0ffff)
- lightgoldenrodyellow (#fafad2)
- lightgray (#d3d3d3)
- lightgreen (#90ee90)
- lightgrey (#d3d3d3)
- lightpink (#ffb6c1)
- lightsalmon (#ffa07a)
- lightseagreen (#20b2aa)
- lightskyblue (#87cefa)
- lightslategrey (#778899)
- lightsteelblue (#b0c4de)
- lightyellow (#ffffe0)
- lime (#00ff00)
- limegreen (#32cd32)
- linen (#faf0e6)
- magenta (#ff00ff)
- maroon (#800000)
- mediumaquamarine (#66cdaa)
- mediumblue (#0000cd)
- mediumorchid (#ba55d3)
- mediumpurple (#9370db)
- mediumseagreen (#3cb371)
- mediumslateblue (#7b68ee)
- mediumspringgreen (#00fa9a)
- mediumturquoise (#48d1cc)
- mediumvioletred (#c71585)
- midnightblue (#191970)
- mintcream (#f5fffa)
- mistyrose (#ffe4e1)
- moccasin (#ffe4b5)
- navajowhite (#ffdead)
- navy (#000080)
- oldlace (#fdf5e6)
- olive (#808000)
- olivedrab (#6b8e23)
- orange (#ffa500)
- orangered (#ff4500)
- orchid (#da70d6)
- palegoldenrod (#eee8aa)
- palegreen (#98fb98)
- paleturquoise (#afeeee)
- palevioletred (#db7093)
- papayawhip (#ffefd5)
- peachpuff (#ffdab9)
- peru (#cd853f)
- pink (#ffc0cb)
- plum (#dda0dd)
- powderblue (#b0e0e6)
- purple (#800080)
- rebeccapurple (#663399)
- red (#ff0000)
- rosybrown (#bc8f8f)
- royalblue (#4169e1)
- saddlebrown (#8b4513)
- salmon (#fa8072)
- sandybrown (#f4a460)
- seagreen (#2e8b57)
- seashell (#fff5ee)
- sienna (#a0522d)
- silver (#c0c0c0)
- skyblue (#87ceeb)
- slateblue (#6a5acd)
- slategray (#708090)
- snow (#fffafa)
- springgreen (#00ff7f)
- steelblue (#4682b4)
- tan (#d2b48c)
- teal (#008080)
- thistle (#d8bfd8)
- tomato (#ff6347)
- turquoise (#40e0d0)
- violet (#ee82ee)
- wheat (#f5deb3)
- white (#ffffff)
- whitesmoke (#f5f5f5)
- yellow (#ffff00)
- yellowgreen (#9acd32)
You can edit the content above on GitHub and send us a pull request!
Color Reference #
Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.
Red-green-blue #
React Native supports rgb() 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 #
This is a shortcut for rgba(0,0,0,0):
'transparent'
Named colors #
You can also use color names as values. React Native follows the CSS3 specification:
- aliceblue (#f0f8ff)
- antiquewhite (#faebd7)
- aqua (#00ffff)
- aquamarine (#7fffd4)
- azure (#f0ffff)
- beige (#f5f5dc)
- bisque (#ffe4c4)
- black (#000000)
- blanchedalmond (#ffebcd)
- blue (#0000ff)
- blueviolet (#8a2be2)
- brown (#a52a2a)
- burlywood (#deb887)
- cadetblue (#5f9ea0)
- chartreuse (#7fff00)
- chocolate (#d2691e)
- coral (#ff7f50)
- cornflowerblue (#6495ed)
- cornsilk (#fff8dc)
- crimson (#dc143c)
- cyan (#00ffff)
- darkblue (#00008b)
- darkcyan (#008b8b)
- darkgoldenrod (#b8860b)
- darkgray (#a9a9a9)
- darkgreen (#006400)
- darkgrey (#a9a9a9)
- darkkhaki (#bdb76b)
- darkmagenta (#8b008b)
- darkolivegreen (#556b2f)
- darkorange (#ff8c00)
- darkorchid (#9932cc)
- darkred (#8b0000)
- darksalmon (#e9967a)
- darkseagreen (#8fbc8f)
- darkslateblue (#483d8b)
- darkslategrey (#2f4f4f)
- darkturquoise (#00ced1)
- darkviolet (#9400d3)
- deeppink (#ff1493)
- deepskyblue (#00bfff)
- dimgray (#696969)
- dimgrey (#696969)
- dodgerblue (#1e90ff)
- firebrick (#b22222)
- floralwhite (#fffaf0)
- forestgreen (#228b22)
- fuchsia (#ff00ff)
- gainsboro (#dcdcdc)
- ghostwhite (#f8f8ff)
- gold (#ffd700)
- goldenrod (#daa520)
- gray (#808080)
- green (#008000)
- greenyellow (#adff2f)
- grey (#808080)
- honeydew (#f0fff0)
- hotpink (#ff69b4)
- indianred (#cd5c5c)
- indigo (#4b0082)
- ivory (#fffff0)
- khaki (#f0e68c)
- lavender (#e6e6fa)
- lavenderblush (#fff0f5)
- lawngreen (#7cfc00)
- lemonchiffon (#fffacd)
- lightblue (#add8e6)
- lightcoral (#f08080)
- lightcyan (#e0ffff)
- lightgoldenrodyellow (#fafad2)
- lightgray (#d3d3d3)
- lightgreen (#90ee90)
- lightgrey (#d3d3d3)
- lightpink (#ffb6c1)
- lightsalmon (#ffa07a)
- lightseagreen (#20b2aa)
- lightskyblue (#87cefa)
- lightslategrey (#778899)
- lightsteelblue (#b0c4de)
- lightyellow (#ffffe0)
- lime (#00ff00)
- limegreen (#32cd32)
- linen (#faf0e6)
- magenta (#ff00ff)
- maroon (#800000)
- mediumaquamarine (#66cdaa)
- mediumblue (#0000cd)
- mediumorchid (#ba55d3)
- mediumpurple (#9370db)
- mediumseagreen (#3cb371)
- mediumslateblue (#7b68ee)
- mediumspringgreen (#00fa9a)
- mediumturquoise (#48d1cc)
- mediumvioletred (#c71585)
- midnightblue (#191970)
- mintcream (#f5fffa)
- mistyrose (#ffe4e1)
- moccasin (#ffe4b5)
- navajowhite (#ffdead)
- navy (#000080)
- oldlace (#fdf5e6)
- olive (#808000)
- olivedrab (#6b8e23)
- orange (#ffa500)
- orangered (#ff4500)
- orchid (#da70d6)
- palegoldenrod (#eee8aa)
- palegreen (#98fb98)
- paleturquoise (#afeeee)
- palevioletred (#db7093)
- papayawhip (#ffefd5)
- peachpuff (#ffdab9)
- peru (#cd853f)
- pink (#ffc0cb)
- plum (#dda0dd)
- powderblue (#b0e0e6)
- purple (#800080)
- rebeccapurple (#663399)
- red (#ff0000)
- rosybrown (#bc8f8f)
- royalblue (#4169e1)
- saddlebrown (#8b4513)
- salmon (#fa8072)
- sandybrown (#f4a460)
- seagreen (#2e8b57)
- seashell (#fff5ee)
- sienna (#a0522d)
- silver (#c0c0c0)
- skyblue (#87ceeb)
- slateblue (#6a5acd)
- slategray (#708090)
- snow (#fffafa)
- springgreen (#00ff7f)
- steelblue (#4682b4)
- tan (#d2b48c)
- teal (#008080)
- thistle (#d8bfd8)
- tomato (#ff6347)
- turquoise (#40e0d0)
- violet (#ee82ee)
- wheat (#f5deb3)
- white (#ffffff)
- whitesmoke (#f5f5f5)
- yellow (#ffff00)
- yellowgreen (#9acd32)
You can edit the content above on GitHub and send us a pull request!
Communication between native and React Native #
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use RCTRootView. 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.
NSArray *imageList = @[@"http://foo.com/bar1.png",
+Communication between native and React Native Communication between native and React Native #
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use RCTRootView. 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.
NSArray *imageList = @[@"http://foo.com/bar1.png",
@"http://foo.com/bar2.png"];
NSDictionary *props = @{@"images" : imageList};
diff --git a/docs/components-and-apis.html b/docs/components-and-apis.html
new file mode 100644
index 00000000000..95c15dae341
--- /dev/null
+++ b/docs/components-and-apis.html
@@ -0,0 +1,209 @@
+Components and APIs Components and APIs #
React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:
You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning react-native, or check out Awesome React Native for a curated list.
Basic Components #
Most apps will end up using one of these basic components. You'll want to get yourself familiarized with all of these if you're new to React Native.
+
+ View
+ The most fundamental component for building a UI.
+
+
+ Text
+ A component for displaying text.
+
+
+ Image
+ A component for displaying images.
+
+
+ TextInput
+ A component for inputting text into the app via a keyboard.
+
+
+ ScrollView
+ Provides a scrolling container that can host multiple components and views.
+
+
+ Button
+ A basic button component for handling touches that should render nicely on any platform.
+
+
+
+User Interface #
Render common user interface controls on any platform using the following components. For platform specific components, keep reading.
+
+List Views #
Unlike the more generic ScrollView, the following list view components only render elements that are currently showing on the screen. This makes them a great choice for displaying long lists of data.
+
+ FlatList
+ A component for rendering performant scrollable lists.
+
+
+ SectionList
+ Like FlatList, but for sectioned lists.
+
+
+
+iOS Components and APIs #
Many of the following components provide wrappers for commonly used UIKit classes.
+
+ ActionSheetIOS
+ API to display an iOS action sheet or share sheet.
+
+
+ AdSupportIOS
+ API to access the "advertising identifier" on iOS.
+
+
+ AlertIOS
+ Create an iOS alert dialog with a message or create a prompt for user input.
+
+
+ DatePickerIOS
+ Renders a date/time picker (selector) on iOS.
+
+
+ ImagePickerIOS
+ Renders a image picker on iOS.
+
+
+ NavigatorIOS
+ A wrapper around UINavigationController, enabling you to implement a navigation stack.
+
+
+ ProgressViewIOS
+ Renders a UIProgressView on iOS.
+
+
+ PushNotificationIOS
+ Handle push notifications for your app, including permission handling and icon badge number.
+
+
+ SegmentedControlIOS
+ Renders a UISegmentedControl on iOS.
+
+
+ TabBarIOS
+ Renders a UITabViewController on iOS. Use with TabBarIOS.Item.
+
+
+
+Android Components and APIs #
Many of the following components provide wrappers for commonly used Android classes.
+
+ BackHandler
+ Detect hardware button presses for back navigation.
+
+
+ DatePickerAndroid
+ Opens the standard Android date picker dialog.
+
+
+ DrawerLayoutAndroid
+ Renders a DrawerLayout on Android.
+
+
+ PermissionsAndroid
+ Provides access to the permissions model introduced in Android M.
+
+
+ ProgressBarAndroid
+ Renders a ProgressBar on Android.
+
+
+ TimePickerAndroid
+ Opens the standard Android time picker dialog.
+
+
+ ToastAndroid
+ Create an Android Toast alert.
+
+
+ ToolbarAndroid
+ Renders a Toolbar on Android.
+
+
+ ViewPagerAndroid
+ Container that allows to flip left and right between child views.
+
+
+
+
+Others #
These components may come in handy for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left.
+
+ ActivityIndicator
+ Displays a circular loading indicator.
+
+
+ Alert
+ Launches an alert dialog with the specified title and message.
+
+
+ CameraRoll
+ Provides access to the local camera roll / gallery.
+
+
+ Clipboard
+ Provides an interface for setting and getting content from the clipboard on both iOS and Android.
+
+
+ Dimensions
+ Provides an interface for getting device dimensions.
+
+
+ KeyboardAvoidingView
+ Provides a view that moves out of the way of the virtual keyboard automatically.
+
+
+ Linking
+ Provides a general interface to interact with both incoming and outgoing app links.
+
+
+ Modal
+ Provides a simple way to present content above an enclosing view.
+
+
+ PixelRatio
+ Provides access to the device pixel density.
+
+
+ RefreshControl
+ This component is used inside a ScrollView to add pull to refresh functionality.
+
+
+ StatusBar
+ Component to control the app status bar.
+
+
+ StyleSheet
+ Provides an abstraction layer similar to CSS stylesheets.
+
+
+ WebView
+ A component that renders web content in a native view.
+
+
+You can edit the content above on GitHub and send us a pull request!
DatePickerAndroid DatePickerAndroid #
Opens the standard Android date picker dialog.
Example #
try {
+DatePickerAndroid DatePickerAndroid #
Opens the standard Android date picker dialog.
Example #
try {
const {action, year, month, day} = await DatePickerAndroid.open({
// Use `new Date()` for current date.
// May 25 2020. Month 0 is January.
diff --git a/docs/datepickerios.html b/docs/datepickerios.html
index 2bcc4205417..fbf423890b6 100644
--- a/docs/datepickerios.html
+++ b/docs/datepickerios.html
@@ -1,4 +1,4 @@
-DatePickerIOS DatePickerIOS #
Use DatePickerIOS to render a date/time picker (selector) on iOS. This is
+
DatePickerIOS DatePickerIOS #
Use 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
diff --git a/docs/debugging.html b/docs/debugging.html
index 868050cd460..c05b24a3377 100644
--- a/docs/debugging.html
+++ b/docs/debugging.html
@@ -1,4 +1,4 @@
-
Debugging Debugging #
Enabling Keyboard Shortcuts #
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.
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator.
The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press ⌘R in the iOS Simulator, or tap R twice on Android emulators.
Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassets on iOS or the res/drawable folder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.
Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use console.warn() to trigger a YellowBox.
YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.
In CI/Xcode, YellowBoxes can also be disabled by setting the IS_TESTING environment variable.
RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Chrome Developer Tools #
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (⌘⌥I on macOS, Ctrl Shift I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.
Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.
Debugging using a custom JavaScript debugger #
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the 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.
The debugger will receive a list of all project roots, separated by a space. For example, if you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the command node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app will be used to start your debugger.
Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
React Developer Tools #
You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:
npm install -g react-devtoolsNow run react-devtools from the terminal to launch the standalone DevTools app:
react-devtools
It should connect to your simulator within a few seconds.
Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.
Integration with React Native Inspector #
Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
You can choose "Hide Inspector" in the same menu to exit this mode.
Inspecting Component Instances #
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.
Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.
Performance Monitor #
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
+Debugging Debugging #
Enabling Keyboard Shortcuts #
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.
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator.
The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press ⌘R in the iOS Simulator, or tap R twice on Android emulators.
Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassets on iOS or the res/drawable folder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.
Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use console.warn() to trigger a YellowBox.
YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.
In CI/Xcode, YellowBoxes can also be disabled by setting the IS_TESTING environment variable.
RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Chrome Developer Tools #
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (⌘⌥I on macOS, Ctrl Shift I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.
Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.
Debugging using a custom JavaScript debugger #
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the 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.
The debugger will receive a list of all project roots, separated by a space. For example, if you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the command node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app will be used to start your debugger.
Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
React Developer Tools #
You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:
npm install -g react-devtoolsNow run react-devtools from the terminal to launch the standalone DevTools app:
react-devtools
It should connect to your simulator within a few seconds.
Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.
Integration with React Native Inspector #
Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
You can choose "Hide Inspector" in the same menu to exit this mode.
Inspecting Component Instances #
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.
Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.
Performance Monitor #
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
Debugging in Ejected Apps #
Run react-native run-android
In a new Chrome tab, open: chrome://inspect, then click on 'Inspect device' (the one followed by "Powered by Stetho").
Debugging native code #
When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.
You can edit the content above on GitHub and send us a pull request!
Dimensions #
Methods #
static set(dims) #
This should only be called from native code by sending the
+
Dimensions Dimensions #
Methods #
static set(dims) #
This should only be called from native code by sending the
didUpdateDimensions event.
@param {object} dims Simple string-keyed object of dimensions to set
static get(dim) #
Initial dimensions are set before runApplication is called so they should
be available before any other require's are run, but may be updated later.
Note: Although dimensions are available immediately, they may change (e.g
due to device rotation) so any rendering logic or styles that depend on
diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html
index 14864e8155f..dfea6a95fa9 100644
--- a/docs/direct-manipulation.html
+++ b/docs/direct-manipulation.html
@@ -1,4 +1,4 @@
-
Direct Manipulation Direct Manipulation #
It is sometimes necessary to make changes directly to a component
+
Direct Manipulation Direct Manipulation #
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
@@ -150,7 +150,7 @@ ignored and overridden.
← PrevNext →
You can edit the content above on GitHub and send us a pull request!
DrawerLayoutAndroid #
React component that wraps the platform DrawerLayout (Android only). The
+
DrawerLayoutAndroid
ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: PropTypes.bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: PropTypes.oneOfType([ PropTypes.oneOf([ 'small', 'large' ]), PropTypes.number, ]) #
Size of the indicator (default is 'small'). diff --git a/docs/adsupportios.html b/docs/adsupportios.html index 52e6c45b4e3..db9b76c624c 100644 --- a/docs/adsupportios.html +++ b/docs/adsupportios.html @@ -1,4 +1,4 @@ -
AdSupportIOS #
AdSupport provides access to the "advertising identifier". If you link this library
+
AdSupportIOS #
AdSupport provides access to the "advertising identifier". If you link this library
in your project, you may need to justify your use for this identifier when submitting
your application to the App Store.
In order to use AdSupport in your project, you must link the RCTAdSupport library.
In Xcode, you can manually add the RCTAdSupport.m and RCTAdSupport.h files from
diff --git a/docs/alert.html b/docs/alert.html
index 15f32b83bb1..b855b98e1a4 100644
--- a/docs/alert.html
+++ b/docs/alert.html
@@ -1,4 +1,4 @@
-
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, diff --git a/docs/alertios.html b/docs/alertios.html index 321d46210ad..78598d35ced 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -
AlertIOS #
AlertIOS provides functionality to create an iOS alert dialog with a
+
AlertIOS #
AlertIOS provides functionality to create an iOS alert dialog with a
message or create a prompt for user input.
Creating an iOS alert:
Building React Native from source #
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Android Support Repository >= 17 (for Android Support Library)
- Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: #
Step 1: Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash:
.bash_profileor.bashrc - zsh:
.zprofileor.zshrc - ksh:
.profileor$ENV
Example:
Building React Native from source #
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Android Support Repository >= 17 (for Android Support Library)
- Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: #
Step 1: Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash:
.bash_profileor.bashrc - zsh:
.zprofileor.zshrc - ksh:
.profileor$ENV
Example:
Step 2: Create a local.properties file in the android directory of your react-native app with the following contents:
Example:
Download links for Android NDK #
- Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
- Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
- Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
- Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip
You can find further instructions on the official page.
Building the source #
1. Installing the fork #
First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:
Alternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.
2. Adding gradle dependencies #
Add gradle-download-task as dependency in android/build.gradle:
Building for Maven/Nexus deployment #
If you find that you need to push up a locally compiled React Native .aar and related files to a remote Nexus repository, you can.
Start by following the Point Gradle to your Android SDK section of this page. Once you do this, assuming you have Gradle configured properly, you can then run the following command from the root of your React Native checkout to build and package all required files:
This will package everything that would typically be included in the android directory of your node_modules/react-native/ installation in the root directory of your React Native checkout.
Testing #
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.
Troubleshooting #
Gradle build fails in ndk-build. See the section about local.properties file above.
You can edit the content above on GitHub and send us a pull request!
Animated #
The Animated library is designed to make animations fluid, powerful, and
+
Animated #
The Animated library is designed to make animations fluid, powerful, and
easy to build and maintain. Animated focuses on declarative relationships
between inputs and outputs, with configurable transforms in between, and
simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an diff --git a/docs/animations.html b/docs/animations.html index ad0b5eea99d..5968c8c4776 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -
Animations #
Animations are very important to create a great user experience. +
Animations #
Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems: @@ -285,7 +285,7 @@ option. You may also want to defer any computationally intensive work until after animations are complete, using the InteractionManager. You can monitor the -frame rate by using the In-App Developer Menu "FPS Monitor" tool.
You can edit the content above on GitHub and send us a pull request!
AppRegistry #
AppRegistry #
Project with Native Code Required
This API only works in projects made with react-native init
diff --git a/docs/appstate.html b/docs/appstate.html
index 4c78200b1e8..c5f9d59b853 100644
--- a/docs/appstate.html
+++ b/docs/appstate.html
@@ -1,4 +1,4 @@
-
AppState #
AppState can tell you if the app is in the foreground or background,
+
AppState #
AppState can tell you if the app is in the foreground or background,
and notify you when the state changes.
AppState is frequently used to determine the intent and proper behavior when handling push notifications.
App States #
active- The app is running in the foregroundbackground- The app is running in the background. The user is either in another app or on the home screeninactive- This is a state that occurs when transitioning between diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index c801f35ced9..53e506c77a7 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage AsyncStorage #
AsyncStorageis a simple, unencrypted, asynchronous, persistent, key-value storage +AsyncStorage AsyncStorage #
AsyncStorageis a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.It is recommended that you use an abstraction on top of
AsyncStorageinstead ofAsyncStoragedirectly for anything more than light usage since it operates globally.On iOS,
AsyncStorageis backed by native code that stores small values in a diff --git a/docs/backandroid.html b/docs/backandroid.html index a1ec5335469..a7f4b721c61 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid BackHandler #
Detect hardware button presses for back navigation.
Android: Detect hardware back button presses, and programmatically invoke the default back button +
BackHandler BackHandler #
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), diff --git a/docs/building-for-apple-tv.html b/docs/building-for-apple-tv.html index 1e8af6a2fcf..4912d5082a6 100644 --- a/docs/building-for-apple-tv.html +++ b/docs/building-for-apple-tv.html @@ -1,4 +1,4 @@ -
Building For Apple TV Building For Apple TV #
Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.
The RNTester app supports Apple TV; use the
RNTester-tvOSbuild target to build for tvOS.Build changes #
Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
react-native init: New React Native projects created with
react-native initwill have Apple TV target automatically created in their XCode projects.JavaScript layer: Support for Apple TV has been added to
Platform.ios.js. You can check whether code is running on AppleTV by doing
var Platform = require('Platform'); +Building For Apple TV Building For Apple TV #
Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.
The RNTester app supports Apple TV; use the
RNTester-tvOSbuild target to build for tvOS.Build changes #
Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
react-native init: New React Native projects created with
react-native initwill have Apple TV target automatically created in their XCode projects.JavaScript layer: Support for Apple TV has been added to
Platform.ios.js. You can check whether code is running on AppleTV by doing
var Platform = require('Platform'); var running_on_apple_tv = Platform.isTVOS;Code changes #
General support for tvOS: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
Access to touchable controls: When running on Apple TV, the native view class is
RCTTVView, which has additional methods to make use of the tvOS focus engine. TheTouchablemixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, soTouchableHighlightandTouchableOpacitywill "just work". In particular:touchableHandleActivePressInwill be executed when the touchable view goes into focustouchableHandleActivePressOutwill be executed when the touchable view goes out of focustouchableHandlePresswill be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
TV remote/keyboard input: A new native class,
RCTTVRemoteHandler, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up byRCTTVNavigationEventEmitter(a subclass ofRCTEventEmitter), that fires a JS event. This event will be picked up by instances of theTVEventHandlerJavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance ofTVEventHandlerand listen for these events, as in the following code:
var TVEventHandler = require('TVEventHandler'); . @@ -38,7 +38,7 @@ class Game2048 extends componentWillUnmount() { this._disableTVEventHandler(); - }TV remote animations:
RCTTVViewnative code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.Back navigation with the TV remote menu button: The
BackHandlercomponent, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.Known issues:
- ListView scrolling. The issue can be easily worked around by setting
removeClippedSubviewsto false in ListView and similar components. For more discussion of this issue, see this PR.
- ListView scrolling. The issue can be easily worked around by setting
You can edit the content above on GitHub and send us a pull request!
Button #
A basic button component that should render nicely on any platform. Supports +
Button Button #
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
If this button doesn't look right for your app, you can build your own diff --git a/docs/cameraroll.html b/docs/cameraroll.html index e26642f657b..3822277c001 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -
CameraRoll CameraRoll #
CameraRollprovides access to the local camera roll / gallery. +CameraRoll CameraRoll #
CameraRollprovides access to the local camera roll / gallery. Before using this you must link theRCTCameraRolllibrary. You can refer to Linking for help.Permissions #
The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the
NSPhotoLibraryUsageDescriptionkey in yourInfo.plistwith a string that describes how your diff --git a/docs/clipboard.html b/docs/clipboard.html index 071d2d06ff7..1d86c09e40f 100644 --- a/docs/clipboard.html +++ b/docs/clipboard.html @@ -1,4 +1,4 @@ -Clipboard Clipboard #
Clipboardgives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString() #
Get content of string type, this method returns a
Promise, so you can use following code to get clipboard contentasync _getContent() { +Clipboard Clipboard #
Clipboardgives you an interface for setting and getting content from Clipboard on both iOS and AndroidMethods #
static getString() #
Get content of string type, this method returns a
Promise, so you can use following code to get clipboard contentasync _getContent() { var content = await Clipboard.getString(); }static setString(content) #
Set content of string type. You can use following code to set clipboard content
_setContent() { Clipboard.setString('hello world'); diff --git a/docs/colors.html b/docs/colors.html index b6e8dbcfa0c..bcf82be68e6 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Colors Colors #
Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.
Red-green-blue #
React Native supports
rgb()andrgba()in both hexadecimal and functional notation:'#f0f'(#rgb)'#ff00ff'(#rrggbb)'rgb(255, 0, 255)''rgba(255, 255, 255, 1.0)''#f0ff'(#rgba)'#ff00ff00'(#rrggbbaa)
Hue-saturation-lightness #
hsl()andhsla()is supported in functional notation:'hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)'
transparent#This is a shortcut for
rgba(0,0,0,0):'transparent'
Named colors #
You can also use color names as values. React Native follows the CSS3 specification:
- aliceblue (#f0f8ff)
- antiquewhite (#faebd7)
- aqua (#00ffff)
- aquamarine (#7fffd4)
- azure (#f0ffff)
- beige (#f5f5dc)
- bisque (#ffe4c4)
- black (#000000)
- blanchedalmond (#ffebcd)
- blue (#0000ff)
- blueviolet (#8a2be2)
- brown (#a52a2a)
- burlywood (#deb887)
- cadetblue (#5f9ea0)
- chartreuse (#7fff00)
- chocolate (#d2691e)
- coral (#ff7f50)
- cornflowerblue (#6495ed)
- cornsilk (#fff8dc)
- crimson (#dc143c)
- cyan (#00ffff)
- darkblue (#00008b)
- darkcyan (#008b8b)
- darkgoldenrod (#b8860b)
- darkgray (#a9a9a9)
- darkgreen (#006400)
- darkgrey (#a9a9a9)
- darkkhaki (#bdb76b)
- darkmagenta (#8b008b)
- darkolivegreen (#556b2f)
- darkorange (#ff8c00)
- darkorchid (#9932cc)
- darkred (#8b0000)
- darksalmon (#e9967a)
- darkseagreen (#8fbc8f)
- darkslateblue (#483d8b)
- darkslategrey (#2f4f4f)
- darkturquoise (#00ced1)
- darkviolet (#9400d3)
- deeppink (#ff1493)
- deepskyblue (#00bfff)
- dimgray (#696969)
- dimgrey (#696969)
- dodgerblue (#1e90ff)
- firebrick (#b22222)
- floralwhite (#fffaf0)
- forestgreen (#228b22)
- fuchsia (#ff00ff)
- gainsboro (#dcdcdc)
- ghostwhite (#f8f8ff)
- gold (#ffd700)
- goldenrod (#daa520)
- gray (#808080)
- green (#008000)
- greenyellow (#adff2f)
- grey (#808080)
- honeydew (#f0fff0)
- hotpink (#ff69b4)
- indianred (#cd5c5c)
- indigo (#4b0082)
- ivory (#fffff0)
- khaki (#f0e68c)
- lavender (#e6e6fa)
- lavenderblush (#fff0f5)
- lawngreen (#7cfc00)
- lemonchiffon (#fffacd)
- lightblue (#add8e6)
- lightcoral (#f08080)
- lightcyan (#e0ffff)
- lightgoldenrodyellow (#fafad2)
- lightgray (#d3d3d3)
- lightgreen (#90ee90)
- lightgrey (#d3d3d3)
- lightpink (#ffb6c1)
- lightsalmon (#ffa07a)
- lightseagreen (#20b2aa)
- lightskyblue (#87cefa)
- lightslategrey (#778899)
- lightsteelblue (#b0c4de)
- lightyellow (#ffffe0)
- lime (#00ff00)
- limegreen (#32cd32)
- linen (#faf0e6)
- magenta (#ff00ff)
- maroon (#800000)
- mediumaquamarine (#66cdaa)
- mediumblue (#0000cd)
- mediumorchid (#ba55d3)
- mediumpurple (#9370db)
- mediumseagreen (#3cb371)
- mediumslateblue (#7b68ee)
- mediumspringgreen (#00fa9a)
- mediumturquoise (#48d1cc)
- mediumvioletred (#c71585)
- midnightblue (#191970)
- mintcream (#f5fffa)
- mistyrose (#ffe4e1)
- moccasin (#ffe4b5)
- navajowhite (#ffdead)
- navy (#000080)
- oldlace (#fdf5e6)
- olive (#808000)
- olivedrab (#6b8e23)
- orange (#ffa500)
- orangered (#ff4500)
- orchid (#da70d6)
- palegoldenrod (#eee8aa)
- palegreen (#98fb98)
- paleturquoise (#afeeee)
- palevioletred (#db7093)
- papayawhip (#ffefd5)
- peachpuff (#ffdab9)
- peru (#cd853f)
- pink (#ffc0cb)
- plum (#dda0dd)
- powderblue (#b0e0e6)
- purple (#800080)
- rebeccapurple (#663399)
- red (#ff0000)
- rosybrown (#bc8f8f)
- royalblue (#4169e1)
- saddlebrown (#8b4513)
- salmon (#fa8072)
- sandybrown (#f4a460)
- seagreen (#2e8b57)
- seashell (#fff5ee)
- sienna (#a0522d)
- silver (#c0c0c0)
- skyblue (#87ceeb)
- slateblue (#6a5acd)
- slategray (#708090)
- snow (#fffafa)
- springgreen (#00ff7f)
- steelblue (#4682b4)
- tan (#d2b48c)
- teal (#008080)
- thistle (#d8bfd8)
- tomato (#ff6347)
- turquoise (#40e0d0)
- violet (#ee82ee)
- wheat (#f5deb3)
- white (#ffffff)
- whitesmoke (#f5f5f5)
- yellow (#ffff00)
- yellowgreen (#9acd32)
You can edit the content above on GitHub and send us a pull request!
Color Reference #
Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.
Red-green-blue #
React Native supports
rgb()andrgba()in both hexadecimal and functional notation:'#f0f'(#rgb)'#ff00ff'(#rrggbb)'rgb(255, 0, 255)''rgba(255, 255, 255, 1.0)''#f0ff'(#rgba)'#ff00ff00'(#rrggbbaa)
Hue-saturation-lightness #
hsl()andhsla()is supported in functional notation:'hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)'
transparent#This is a shortcut for
rgba(0,0,0,0):'transparent'
Named colors #
You can also use color names as values. React Native follows the CSS3 specification:
- aliceblue (#f0f8ff)
- antiquewhite (#faebd7)
- aqua (#00ffff)
- aquamarine (#7fffd4)
- azure (#f0ffff)
- beige (#f5f5dc)
- bisque (#ffe4c4)
- black (#000000)
- blanchedalmond (#ffebcd)
- blue (#0000ff)
- blueviolet (#8a2be2)
- brown (#a52a2a)
- burlywood (#deb887)
- cadetblue (#5f9ea0)
- chartreuse (#7fff00)
- chocolate (#d2691e)
- coral (#ff7f50)
- cornflowerblue (#6495ed)
- cornsilk (#fff8dc)
- crimson (#dc143c)
- cyan (#00ffff)
- darkblue (#00008b)
- darkcyan (#008b8b)
- darkgoldenrod (#b8860b)
- darkgray (#a9a9a9)
- darkgreen (#006400)
- darkgrey (#a9a9a9)
- darkkhaki (#bdb76b)
- darkmagenta (#8b008b)
- darkolivegreen (#556b2f)
- darkorange (#ff8c00)
- darkorchid (#9932cc)
- darkred (#8b0000)
- darksalmon (#e9967a)
- darkseagreen (#8fbc8f)
- darkslateblue (#483d8b)
- darkslategrey (#2f4f4f)
- darkturquoise (#00ced1)
- darkviolet (#9400d3)
- deeppink (#ff1493)
- deepskyblue (#00bfff)
- dimgray (#696969)
- dimgrey (#696969)
- dodgerblue (#1e90ff)
- firebrick (#b22222)
- floralwhite (#fffaf0)
- forestgreen (#228b22)
- fuchsia (#ff00ff)
- gainsboro (#dcdcdc)
- ghostwhite (#f8f8ff)
- gold (#ffd700)
- goldenrod (#daa520)
- gray (#808080)
- green (#008000)
- greenyellow (#adff2f)
- grey (#808080)
- honeydew (#f0fff0)
- hotpink (#ff69b4)
- indianred (#cd5c5c)
- indigo (#4b0082)
- ivory (#fffff0)
- khaki (#f0e68c)
- lavender (#e6e6fa)
- lavenderblush (#fff0f5)
- lawngreen (#7cfc00)
- lemonchiffon (#fffacd)
- lightblue (#add8e6)
- lightcoral (#f08080)
- lightcyan (#e0ffff)
- lightgoldenrodyellow (#fafad2)
- lightgray (#d3d3d3)
- lightgreen (#90ee90)
- lightgrey (#d3d3d3)
- lightpink (#ffb6c1)
- lightsalmon (#ffa07a)
- lightseagreen (#20b2aa)
- lightskyblue (#87cefa)
- lightslategrey (#778899)
- lightsteelblue (#b0c4de)
- lightyellow (#ffffe0)
- lime (#00ff00)
- limegreen (#32cd32)
- linen (#faf0e6)
- magenta (#ff00ff)
- maroon (#800000)
- mediumaquamarine (#66cdaa)
- mediumblue (#0000cd)
- mediumorchid (#ba55d3)
- mediumpurple (#9370db)
- mediumseagreen (#3cb371)
- mediumslateblue (#7b68ee)
- mediumspringgreen (#00fa9a)
- mediumturquoise (#48d1cc)
- mediumvioletred (#c71585)
- midnightblue (#191970)
- mintcream (#f5fffa)
- mistyrose (#ffe4e1)
- moccasin (#ffe4b5)
- navajowhite (#ffdead)
- navy (#000080)
- oldlace (#fdf5e6)
- olive (#808000)
- olivedrab (#6b8e23)
- orange (#ffa500)
- orangered (#ff4500)
- orchid (#da70d6)
- palegoldenrod (#eee8aa)
- palegreen (#98fb98)
- paleturquoise (#afeeee)
- palevioletred (#db7093)
- papayawhip (#ffefd5)
- peachpuff (#ffdab9)
- peru (#cd853f)
- pink (#ffc0cb)
- plum (#dda0dd)
- powderblue (#b0e0e6)
- purple (#800080)
- rebeccapurple (#663399)
- red (#ff0000)
- rosybrown (#bc8f8f)
- royalblue (#4169e1)
- saddlebrown (#8b4513)
- salmon (#fa8072)
- sandybrown (#f4a460)
- seagreen (#2e8b57)
- seashell (#fff5ee)
- sienna (#a0522d)
- silver (#c0c0c0)
- skyblue (#87ceeb)
- slateblue (#6a5acd)
- slategray (#708090)
- snow (#fffafa)
- springgreen (#00ff7f)
- steelblue (#4682b4)
- tan (#d2b48c)
- teal (#008080)
- thistle (#d8bfd8)
- tomato (#ff6347)
- turquoise (#40e0d0)
- violet (#ee82ee)
- wheat (#f5deb3)
- white (#ffffff)
- whitesmoke (#f5f5f5)
- yellow (#ffff00)
- yellowgreen (#9acd32)
You can edit the content above on GitHub and send us a pull request!
Communication between native and React Native #
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use
RCTRootView.RCTRootViewis aUIViewthat holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootViewhas an initializer that allows you to pass arbitrary properties down to the React Native app. TheinitialPropertiesparameter has to be an instance ofNSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.NSArray *imageList = @[@"http://foo.com/bar1.png", +Communication between native and React Native Communication between native and React Native #
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use
RCTRootView.RCTRootViewis aUIViewthat holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootViewhas an initializer that allows you to pass arbitrary properties down to the React Native app. TheinitialPropertiesparameter has to be an instance ofNSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.NSArray *imageList = @[@"http://foo.com/bar1.png", @"http://foo.com/bar2.png"]; NSDictionary *props = @{@"images" : imageList}; diff --git a/docs/components-and-apis.html b/docs/components-and-apis.html new file mode 100644 index 00000000000..95c15dae341 --- /dev/null +++ b/docs/components-and-apis.html @@ -0,0 +1,209 @@ +Components and APIs \ No newline at end of file diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html index a31f7192423..88f42aa867a 100644 --- a/docs/datepickerandroid.html +++ b/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -Components and APIs #
React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:
You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning react-native, or check out Awesome React Native for a curated list.
Basic Components #
Most apps will end up using one of these basic components. You'll want to get yourself familiarized with all of these if you're new to React Native.
++ +++View
+The most fundamental component for building a UI.
+++Text
+A component for displaying text.
+++Image
+A component for displaying images.
+++TextInput
+A component for inputting text into the app via a keyboard.
+++ScrollView
+Provides a scrolling container that can host multiple components and views.
+++Button
+A basic button component for handling touches that should render nicely on any platform.
+User Interface #
Render common user interface controls on any platform using the following components. For platform specific components, keep reading.
+ +List Views #
Unlike the more generic
ScrollView, the following list view components only render elements that are currently showing on the screen. This makes them a great choice for displaying long lists of data.++ +++FlatList
+A component for rendering performant scrollable lists.
+++SectionList
+Like
+FlatList, but for sectioned lists.iOS Components and APIs #
Many of the following components provide wrappers for commonly used UIKit classes.
++ +++ActionSheetIOS
+API to display an iOS action sheet or share sheet.
+++AdSupportIOS
+API to access the "advertising identifier" on iOS.
+++AlertIOS
+Create an iOS alert dialog with a message or create a prompt for user input.
+++DatePickerIOS
+Renders a date/time picker (selector) on iOS.
+++ImagePickerIOS
+Renders a image picker on iOS.
+++NavigatorIOS
+A wrapper around
+UINavigationController, enabling you to implement a navigation stack.++ProgressViewIOS
+Renders a
+UIProgressViewon iOS.++PushNotificationIOS
+Handle push notifications for your app, including permission handling and icon badge number.
+++SegmentedControlIOS
+Renders a
+UISegmentedControlon iOS.++TabBarIOS
+Renders a
+UITabViewControlleron iOS. Use with TabBarIOS.Item.Android Components and APIs #
Many of the following components provide wrappers for commonly used Android classes.
++ + +++BackHandler
+Detect hardware button presses for back navigation.
+++DatePickerAndroid
+Opens the standard Android date picker dialog.
+++DrawerLayoutAndroid
+Renders a
+DrawerLayouton Android.++PermissionsAndroid
+Provides access to the permissions model introduced in Android M.
+++ProgressBarAndroid
+Renders a
+ProgressBaron Android.++TimePickerAndroid
+Opens the standard Android time picker dialog.
+++ToastAndroid
+Create an Android Toast alert.
+++ToolbarAndroid
+Renders a
+Toolbaron Android.++ViewPagerAndroid
+Container that allows to flip left and right between child views.
+Others #
These components may come in handy for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left.
++++ActivityIndicator
+Displays a circular loading indicator.
+++Alert
+Launches an alert dialog with the specified title and message.
+++CameraRoll
+Provides access to the local camera roll / gallery.
+++Clipboard
+Provides an interface for setting and getting content from the clipboard on both iOS and Android.
+++Dimensions
+Provides an interface for getting device dimensions.
+++KeyboardAvoidingView
+Provides a view that moves out of the way of the virtual keyboard automatically.
+++Linking
+Provides a general interface to interact with both incoming and outgoing app links.
+++Modal
+Provides a simple way to present content above an enclosing view.
+++PixelRatio
+Provides access to the device pixel density.
+++RefreshControl
+This component is used inside a
+ScrollViewto add pull to refresh functionality.++StatusBar
+Component to control the app status bar.
+++StyleSheet
+Provides an abstraction layer similar to CSS stylesheets.
+++WebView
+A component that renders web content in a native view.
+You can edit the content above on GitHub and send us a pull request!
DatePickerAndroid DatePickerAndroid #
Opens the standard Android date picker dialog.
Example #
try { +DatePickerAndroid DatePickerAndroid #
Opens the standard Android date picker dialog.
Example #
try { const {action, year, month, day} = await DatePickerAndroid.open({ // Use `new Date()` for current date. // May 25 2020. Month 0 is January. diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 2bcc4205417..fbf423890b6 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -DatePickerIOS DatePickerIOS #
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +DatePickerIOS DatePickerIOS #
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to theonDateChangecallback and update thedateprop in order for the component to update, otherwise the user's change will be reverted immediately to reflectprops.dateas the diff --git a/docs/debugging.html b/docs/debugging.html index 868050cd460..c05b24a3377 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -Debugging Debugging #
Enabling Keyboard Shortcuts #
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.
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the
⌘Dkeyboard shortcut when your app is running in the iOS Simulator, or⌘Mwhen running in an Android emulator.The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press
⌘Rin the iOS Simulator, or tapRtwice on Android emulators.Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or theres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use
console.error()to manually trigger one.Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use
console.warn()to trigger a YellowBox.YellowBoxes can be disabled during development by using
console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:console.ignoredYellowBox = ['Warning: ...'];.In CI/Xcode, YellowBoxes can also be disabled by setting the
IS_TESTINGenvironment variable.RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Chrome Developer Tools #
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Select
Tools → Developer Toolsfrom the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (⌘⌥Ion macOS,CtrlShiftIon Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.
Debugging using a custom JavaScript debugger #
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the
REACT_DEBUGGERenvironment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.The debugger will receive a list of all project roots, separated by a space. For example, if you set
REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the commandnode /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/appwill be used to start your debugger.Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
React Developer Tools #
You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the
react-devtoolspackage globally:npm install -g react-devtoolsNow run
react-devtoolsfrom the terminal to launch the standalone DevTools app:react-devtoolsIt should connect to your simulator within a few seconds.
Note: if you prefer to avoid global installations, you can add
react-devtoolsas a project dependency. Add thereact-devtoolspackage to your project usingnpm install --save-dev react-devtools, then add"react-devtools": "react-devtools"to thescriptssection in yourpackage.json, and then runnpm run react-devtoolsfrom your project folder to open the DevTools.Integration with React Native Inspector #
Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
However, when
react-devtoolsis running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:You can choose "Hide Inspector" in the same menu to exit this mode.
Inspecting Component Instances #
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Make sure that the dropdown in the top left corner of the Chrome console says
debuggerWorker.js. This step is essential.Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as
$rin the Chrome console, letting you inspect its props, state, and instance properties.Performance Monitor #
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
+Debugging Debugging #
Enabling Keyboard Shortcuts #
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.
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the
⌘Dkeyboard shortcut when your app is running in the iOS Simulator, or⌘Mwhen running in an Android emulator.The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press
⌘Rin the iOS Simulator, or tapRtwice on Android emulators.Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or theres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use
console.error()to manually trigger one.Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use
console.warn()to trigger a YellowBox.YellowBoxes can be disabled during development by using
console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:console.ignoredYellowBox = ['Warning: ...'];.In CI/Xcode, YellowBoxes can also be disabled by setting the
IS_TESTINGenvironment variable.RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Chrome Developer Tools #
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Select
Tools → Developer Toolsfrom the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (⌘⌥Ion macOS,CtrlShiftIon Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.
Debugging using a custom JavaScript debugger #
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the
REACT_DEBUGGERenvironment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.The debugger will receive a list of all project roots, separated by a space. For example, if you set
REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the commandnode /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/appwill be used to start your debugger.Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
React Developer Tools #
You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the
react-devtoolspackage globally:npm install -g react-devtoolsNow run
react-devtoolsfrom the terminal to launch the standalone DevTools app:react-devtoolsIt should connect to your simulator within a few seconds.
Note: if you prefer to avoid global installations, you can add
react-devtoolsas a project dependency. Add thereact-devtoolspackage to your project usingnpm install --save-dev react-devtools, then add"react-devtools": "react-devtools"to thescriptssection in yourpackage.json, and then runnpm run react-devtoolsfrom your project folder to open the DevTools.Integration with React Native Inspector #
Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
However, when
react-devtoolsis running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:You can choose "Hide Inspector" in the same menu to exit this mode.
Inspecting Component Instances #
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Make sure that the dropdown in the top left corner of the Chrome console says
debuggerWorker.js. This step is essential.Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as
$rin the Chrome console, letting you inspect its props, state, and instance properties.Performance Monitor #
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
Debugging in Ejected Apps #
Run
react-native run-androidIn a new Chrome tab, open:
chrome://inspect, then click on 'Inspect device' (the one followed by "Powered by Stetho").Debugging native code #
When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.
You can edit the content above on GitHub and send us a pull request!
Dimensions #
Methods #
static set(dims) #
This should only be called from native code by sending the +
Dimensions Dimensions #
Methods #
static set(dims) #
This should only be called from native code by sending the didUpdateDimensions event.
@param {object} dims Simple string-keyed object of dimensions to set
static get(dim) #
Initial dimensions are set before
runApplicationis called so they should be available before any other require's are run, but may be updated later.Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index 14864e8155f..dfea6a95fa9 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -1,4 +1,4 @@ -
Direct Manipulation Direct Manipulation #
It is sometimes necessary to make changes directly to a component +
Direct Manipulation Direct Manipulation #
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 @@ -150,7 +150,7 @@ ignored and overridden.
← PrevNext →
You can edit the content above on GitHub and send us a pull request!
DrawerLayoutAndroid #
React component that wraps the platform
DrawerLayout(Android only). The +DrawerLayoutAndroid