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:
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 559e100fde4..b6f455fa2d1 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 db9b76c624c..fc1ba0a0bc2 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 b855b98e1a4..9e0d4ba6982 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 78598d35ced..cf89f43450f 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 169a543ec82..3e770f075d7 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 {
diff --git a/docs/animated.html b/docs/animated.html
index 648fb2002f6..0e9f8f41520 100644
--- a/docs/animated.html
+++ b/docs/animated.html
@@ -1,4 +1,4 @@
-Animated 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 5968c8c4776..a1ccd9595d8 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:
diff --git a/docs/appregistry.html b/docs/appregistry.html
index 5c770e387e7..aaf7c24ef3c 100644
--- a/docs/appregistry.html
+++ b/docs/appregistry.html
@@ -1,4 +1,4 @@
-
AppRegistry 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 c5f9d59b853..1e87d78d8ae 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 53e506c77a7..c64752ed645 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 a7f4b721c61..cba262ab662 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 4912d5082a6..fa3cdce3af9 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');
.
diff --git a/docs/button.html b/docs/button.html
index 0cb48a74d7c..c846a2725d0 100644
--- a/docs/button.html
+++ b/docs/button.html
@@ -1,4 +1,4 @@
-Button Button #
A basic button component that should render nicely on any platform. Supports
+
Button Button #
A basic button component that should render nicely on any platform. Supports
a minimal level of customization.
If this button doesn't look right for your app, you can build your own
diff --git a/docs/cameraroll.html b/docs/cameraroll.html
index 3822277c001..7b56158eaa2 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 1d86c09e40f..7c3051ba0ba 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 bcf82be68e6..a3f9699aa9b 100644
--- a/docs/colors.html
+++ b/docs/colors.html
@@ -1,4 +1,4 @@
-Color Reference 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!
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
index 95c15dae341..3df4c21c0d1 100644
--- a/docs/components-and-apis.html
+++ b/docs/components-and-apis.html
@@ -1,4 +1,4 @@
-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.
+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.
@@ -188,7 +188,7 @@
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 #
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 fbf423890b6..b8c3d8a69d1 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 c05b24a3377..e3370c334f2 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
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 db9b76c624c..fc1ba0a0bc2 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 b855b98e1a4..9e0d4ba6982 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 78598d35ced..cf89f43450f 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:
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 5968c8c4776..a1ccd9595d8 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: diff --git a/docs/appregistry.html b/docs/appregistry.html index 5c770e387e7..aaf7c24ef3c 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -
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 c5f9d59b853..1e87d78d8ae 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 53e506c77a7..c64752ed645 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 a7f4b721c61..cba262ab662 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 4912d5082a6..fa3cdce3af9 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'); . diff --git a/docs/button.html b/docs/button.html index 0cb48a74d7c..c846a2725d0 100644 --- a/docs/button.html +++ b/docs/button.html @@ -1,4 +1,4 @@ -Button Button #
A basic button component that should render nicely on any platform. Supports +
Button Button #
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
If this button doesn't look right for your app, you can build your own diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 3822277c001..7b56158eaa2 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 1d86c09e40f..7c3051ba0ba 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 bcf82be68e6..a3f9699aa9b 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Color Reference 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!
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 index 95c15dae341..3df4c21c0d1 100644 --- a/docs/components-and-apis.html +++ b/docs/components-and-apis.html @@ -1,4 +1,4 @@ -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.
+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.
@@ -188,7 +188,7 @@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 #
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 fbf423890b6..b8c3d8a69d1 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 c05b24a3377..e3370c334f2 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