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
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
- algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 }
+ algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 }
});
\ No newline at end of file
diff --git a/docs/accessibilityinfo.html b/docs/accessibilityinfo.html
index fead285968e..7516b8133de 100644
--- a/docs/accessibilityinfo.html
+++ b/docs/accessibilityinfo.html
@@ -1,4 +1,4 @@
-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:
announcement: The string announced by the s apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 8024a9f5af3..205fb9ce79c 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,9 +1,9 @@ -ActionSheetIOS ActionSheetIOS #
Methods #
static showActionSheetWithOptions(options, callback) #
Display an iOS action sheet. The
optionsobject must contain one or more +ActionSheetIOS \ No newline at end of file diff --git a/docs/activityindicator.html b/docs/activityindicator.html index fa8acaa2f89..85e2d51c6cb 100644 --- a/docs/activityindicator.html +++ b/docs/activityindicator.html @@ -1,4 +1,4 @@ -ActionSheetIOS #
Methods #
static showActionSheetWithOptions(options, callback) #
Display an iOS action sheet. The
optionsobject 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
optionsobject should contain one or both ofmessageandurland can additionally have asubjectorexcludedActivityTypes: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
urlpoints to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. -In this way, you can share images, videos, PDF files, etc.Improve this page by sending a pull request!
ActivityIndicator ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: enum('small', 'large'), number #
Size of the indicator (default is 'small'). +
ActivityIndicator \ No newline at end of file diff --git a/docs/adsupportios.html b/docs/adsupportios.html deleted file mode 100644 index 8b4b13797ec..00000000000 --- a/docs/adsupportios.html +++ /dev/null @@ -1,24 +0,0 @@ -ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: enum('small', 'large'), number #
Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.
ioshidesWhenStopped?: bool #
Whether the indicator should hide when not animating (true by default).
Improve this page by sending a pull request!
AdSupportIOS \ No newline at end of file diff --git a/docs/alert.html b/docs/alert.html index 8738d651396..d6a0b3c0bcb 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,4 +1,4 @@ -AdSupportIOS #
AdSupportprovides 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
AdSupportin your project, you must link theRCTAdSupportlibrary. -In Xcode, you can manually add theRCTAdSupport.mandRCTAdSupport.hfiles from -node_modules/react-native/Libraries/AdSupport/to theLibraries/React/Base/folder -of your current project.You can refer to Linking for help.
Methods #
Improve this page by sending a pull request!
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 \ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index f3efe141e31..c47399be798 100644 --- a/docs/alertios.html +++ b/docs/alertios.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 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, @@ -18,7 +18,7 @@ i.e.
{ cancelable: false }Example usage:
{text: 'OK', onPress: () => console.log('OK Pressed')}, ], { cancelable: false } -)Methods #
static alert(title, message?, buttons?, options?, type?) #
Improve this page by sending a pull request!
AlertIOS AlertIOS #
AlertIOSprovides functionality to create an iOS alert dialog with a +AlertIOS AlertIOS #
AlertIOSprovides 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.' @@ -59,6 +59,6 @@ cross-platform support if you don't need to create iOS-only prompts. \ No newline at end of file diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index 3dd6bf917eb..c0d54a06e53 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
androidto 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:
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
androidto 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:
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.propertiesfile in theandroiddirectory 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-nativefrom 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_modulesdirectory and runnpm installinside the cloned repo.2. Adding gradle dependencies #
Add
gradle-download-taskas dependency inandroid/build.gradle:... dependencies { @@ -44,6 +44,6 @@ dependencies { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 8223dcf86b4..d9824063c80 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,4 +1,4 @@ -\ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index 42c02d07470..a0f412dba61 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animated Animated #
The
Animatedlibrary is designed to make animations fluid, powerful, and +Animated Animated #
The
Animatedlibrary is designed to make animations fluid, powerful, and easy to build and maintain.Animatedfocuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simplestart/stopmethods to control time-based animation execution.The simplest workflow for creating an animation is to to create an @@ -88,9 +88,9 @@ end, it resets and begins again from the start. Can specify number of times to loop using the key 'iterations' in the config. Will loop without blocking the UI thread if the child animation is set to 'useNativeDriver'.
static event(argMapping, config?) #
Takes an array of mappings and extracts values from each arg accordingly, then calls
setValueon the mapped outputs. e.g.onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + [{nativeEvent: {contentOffset: {x: this._scrollX}}}], {listener}, // Optional async listener - ) + )} ... onPanResponderMove: Animated.event([ null, // raw event arg ignored @@ -98,7 +98,7 @@ then callssetValueon the mapped outputs. e.g.]),Config is an object that may have the following options:
listener: Optional async listener.useNativeDriver: Uses the native driver when true. Default false.
static createAnimatedComponent(Component) #
Make any React component Animatable. Used to create
Animated.View, etc.static attachNativeEvent(viewRef, eventName, argMapping) #
Imperative API to attach an animated value to an event on a view. Prefer using
Animated.eventwithuseNativeDrive: trueif possible.static forkEvent(event, listener) #
Advanced imperative API for snooping on animated events that are passed in through props. Use values directly where possible.
static unforkEvent(event, listener) #
Properties #
Value: AnimatedValue #
Standard value class for driving animations. Typically initialized with -
new Animated.Value(0);See also
AnimatedValue.ValueXY: AnimatedValueXY #
2D value class for driving 2D animations, such as pan gestures.
See also
AnimatedValueXY.Interpolation: AnimatedInterpolation #
exported to use the Interpolation type in flow
See also
AnimatedInterpolation.class AnimatedValue #
Standard value for driving animations. One
Animated.Valuecan drive +new Animated.Value(0);See also
AnimatedValue.ValueXY: AnimatedValueXY #
2D value class for driving 2D animations, such as pan gestures.
See also
AnimatedValueXY.Interpolation: AnimatedInterpolation #
exported to use the Interpolation type in flow
See also
AnimatedInterpolation.class AnimatedValue #
Standard value for driving animations. One
Animated.Valuecan drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or callingsetValue) will stop any previous ones.Methods #
resetAnimation(callback?) #
Stops any animation and resets the value to its original
interpolate(config) #
Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10.
animate(animation, callback) #
Typically only used internally, but could be used by a custom Animation -class.
stopTracking() #
Typically only used internally.
track(tracking) #
Typically only used internally.
class AnimatedValueXY #
2D Value for driving 2D animations, such as pan gestures. Almost identical +class.
stopTracking() #
Typically only used internally.
track(tracking) #
Typically only used internally.
class AnimatedValueXY #
2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal
Animated.Value, but multiplexed. Contains two regularAnimated.Values under the hood.Example #
class DraggableView extends React.Component { constructor(props) { @@ -145,7 +145,7 @@ API to normalAnimated.Value, but multiplexed. Contains two regula } }Methods #
constructor(valueIn?) #
setValue(value) #
setOffset(offset) #
flattenOffset() #
extractOffset() #
resetAnimation(callback?) #
stopAnimation(callback?) #
addListener(callback) #
removeListener(id) #
removeAllListeners() #
getLayout() #
Converts
{x, y}into{left, top}for use in style, e.g.style={this.state.anim.getLayout()}getTranslateTransform() #
Converts
{x, y}into a useable translation transform, e.g.style={{ transform: this.state.anim.getTranslateTransform() - }}class AnimatedInterpolation #
Methods #
Improve this page by sending a pull request!
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: @@ -271,7 +271,7 @@ familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will -manage frame updates for you.
setNativeProps#As mentioned in the Direction Manipulation section, +manage frame updates for you.
setNativeProps#As mentioned in the Direct Manipulation section,
< apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/app-extensions.html b/docs/app-extensions.html new file mode 100644 index 00000000000..29c45bb6e0f --- /dev/null +++ b/docs/app-extensions.html @@ -0,0 +1,19 @@ +setNativePropsallows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having tosetStateand @@ -301,6 +301,6 @@ frame rate by using the In-App Developer Menu "FPS Monitor" tool.App Extensions \ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index 7fa26a2c5f7..a419e18cdb5 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -App Extensions #
App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the App Extension Programming Guide. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.
Memory use in extensions #
As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
We highly recommend that you watch Conrad Kramer's talk on Memory Use in Extensions to learn more about this topic.
Today widget #
The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':
Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use Xcode's Instruments to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.
To experiment with the limits of React Native Today widget implementations, try extending the example project in react-native-today-widget.
Other app extensions #
Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is react-native-ios-share-extension.
Improve this page by sending a pull request!
AppRegistry AppRegistry #
+AppRegistry AppRegistry #
Project with Native Code Required
This API only works in projects made with
react-native init@@ -39,6 +39,6 @@ sure the JS execution environment is setup before other modules are apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index 2fd2045d9c2..018ca358374 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -AppState AppState #
AppStatecan tell you if the app is in the foreground or background, +AppState AppState #
AppStatecan 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 @@ -59,6 +59,6 @@ required to be globally unique).
\ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 9622da00804..48592d3e2d0 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 @@ -131,6 +131,6 @@ AsyncStorage. \ No newline at end of file diff --git a/docs/backandroid.html b/docs/backandroid.html index b21f2c87f0d..c5ca284cf23 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid \ No newline at end of file diff --git a/docs/backhandler.html b/docs/backhandler.html index c4ee35454e3..a105c5e514d 100644 --- a/docs/backhandler.html +++ b/docs/backhandler.html @@ -1,4 +1,4 @@ -BackHandler 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), @@ -27,6 +27,6 @@ and if one subscription returns true then subscriptions registered earlier will apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/building-for-apple-tv.html b/docs/building-for-apple-tv.html index e730ba73da0..9da7dd70449 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 \ No newline at end of file diff --git a/docs/button.html b/docs/button.html index f5bb0a3f195..9aad03aa403 100644 --- a/docs/button.html +++ b/docs/button.html @@ -1,4 +1,4 @@ -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 @@ 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
Improve this page by sending a pull request!
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 @@ -26,6 +26,6 @@ Or, take a look at the \ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 8bbedc3e068..60ddba4ef5d 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 @@ -22,6 +22,6 @@ roll of the device matching shape defined bygetPhotosReturnCheckerapiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/clipboard.html b/docs/clipboard.html index 455cf9e4e60..3c36f65f166 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'); @@ -18,6 +18,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/colors.html b/docs/colors.html index 911cdaa4b3c..539d3e80350 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)
Improve this page by sending a pull request!
\ No newline at end of file diff --git a/docs/communication-ios.html b/docs/communication-ios.html index 4d0d3922f2e..73ecb444520 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -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)
Improve this page by sending a pull request!
Communication between native and React Native Communication between native and React Native #
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction #
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
Properties #
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native #
In order to embed a React Native view in a native component, we use
RCTRootView.RCTRootViewis aUIViewthat holds a React Native app. It also provides an interface between native side and the hosted app.RCTRootViewhas an initializer that allows you to pass arbitrary properties down to the React Native app. TheinitialPropertiesparameter has to be an instance ofNSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.NSArray *imageList = @[@"http://foo.com/bar1.png", +Communication between native and React Native 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}; @@ -90,6 +90,6 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/components-and-apis.html b/docs/components-and-apis.html index 094604fc0d8..761054f1277 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.
@@ -20,12 +20,16 @@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.
+StyleSheet
+Provides an abstraction layer similar to CSS stylesheets.
User Interface #
Render common user interface controls on any platform using the following components. For platform specific components, keep reading.
++Button
+A basic button component for handling touches that should render nicely on any platform.
+-Picker
Renders the native picker component on iOS and Android.
@@ -56,10 +60,6 @@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.
@@ -143,6 +143,10 @@Alert
Launches an alert dialog with the specified title and message.
+Animated
+A library for creating fluid, powerful animations that are easy to build and maintain.
+-CameraRoll
Provides access to the local camera roll / gallery.
@@ -179,10 +183,6 @@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.
@@ -204,6 +204,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/contributing.html b/docs/contributing.html index 453461cd2b5..8efbe150656 100644 --- a/docs/contributing.html +++ b/docs/contributing.html @@ -1,4 +1,4 @@ -How to Contribute How to Contribute #
React Native is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody using Facebook's mobile apps. If you're interested in contributing to React Native, hopefully this document makes the process for contributing clear.
Core contributors to React Native meet monthly and post their meeting notes on the React Native blog. You can also find ad hoc discussions in the React Native Core Contributors Facebook group.
Code of Conduct #
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
How to contribute #
There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started:
- Simply start using React Native. Go through the Getting Started guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by opening an issue.
- Look through the open issues. Provide workarounds, ask for clarification, or suggest labels. Help triage issues.
- If you find an issue you would like to fix, open a pull request. Issues tagged as
Good First Taskare a good place to get started. - Read through the React Native docs. If you find anything that is confusing or can be improved, you can make edits by clicking "Improve this page" at the bottom of most docs.
- Browse Stack Overflow and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation.
- Take a look at the features requested by others in the community and consider opening a pull request if you see something you want to work on.
Contributions are very welcome. If you think you need help planning your contribution, please hop into #react-native and let people know you're looking for a mentor.
Triaging issues and pull requests #
One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
- Ask for more information if the issue does not provide all the details required by the template.
- Suggest labels that can help categorize issues.
- Flag issues that are stale or that should be closed.
- Ask for test plans and review code.
Adding labels, closing and reopening issues, and merging pull requests is, as you may expect, limited to a subset of contributors. Simply commenting on the issue or pull request can still go a long way towards helping us keep the number of outstanding issues under control.
Once you have become an active contributor in the community, you may gain access to the Facebook GitHub Bot, allowing you to perform some of these operations yourself. You can learn more about the bot in the maintainer's guide.
Our development process #
Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
When a change made on GitHub is approved, it will first be imported into Facebook's internal source control. The change will eventually sync back to GitHub as a single commit once it has passed all internal tests.
Branch organization #
We will do our best to keep
masterin good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and version appropriately so you can lock into a specific version if need be.To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
Bugs #
We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a bug report.
If you have questions about using React Native, the help page list various resources that should help you get started.
We also have a place where you can request features or enhancements. If you see anything you'd like to be implemented, vote it up and explain your use case.
Reporting new issues #
When opening a new issue, always make sure to fill out the issue template. This step is very important! Not doing so may result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
- One issue, one bug: Please report a single bug per issue.
- Provide a Snack: The best way to get attention on your issue is to provide a reduced test case. You can use Snack to demonstrate the issue.
- Provide reproduction steps: List all the steps necessary to reproduce the issue. Provide a Snack or upload a sample project to GitHub. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
- Try out the latest version: Verify that the issue can be reproduced locally by updating your project to use React Native from
master. The bug may have already been fixed!
We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on Stack Overflow or reaching out to the community through other channels.
Security bugs #
Facebook has a bounty program for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.
Pull requests #
Your first pull request #
So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at.
Working on your first Pull Request? You can learn how from this free video series:
How to Contribute to an Open Source Project on GitHub
We have a list of beginner friendly issues to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.
Proposing a change #
If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, we have a place to track feature requests.
If you intend to change the public API, or make any non-trivial changes to the implementation, we recommend filing an issue. This lets us reach an agreement on your proposal before you put significant effort into it.
If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend to file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
Sending a pull request #
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Before submitting a pull request, please make sure the following is done:
- Fork the repository and create your branch from
master. - Add the copyright notice to the top of any new files you've added.
- Describe your test plan in your commit.
- Ensure tests pass on both Travis and Circle CI.
- Make sure your code lints (
npm run lint). - If you haven't already, sign the CLA.
All pull requests should be opened against the
masterbranch.Note: It is not necessary to keep clicking
Merge master to your branchon the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR.Test plan #
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website.
- If you've added code that should be tested, add tests!
- If you've changed APIs, update the documentation.
- If you've updated the docs, verify the website locally and submit screenshots if applicable (see website/README.md)
See What is a Test Plan? to learn more.
Continuous integration tests #
Make sure all tests pass on both Travis and Circle CI. PRs that break tests are unlikely to be merged. Learn more about testing your changes here.
Breaking changes #
When adding a new breaking change, follow this template in your pull request:
### New breaking change here +How to Contribute How to Contribute #
React Native is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody using Facebook's mobile apps. If you're interested in contributing to React Native, hopefully this document makes the process for contributing clear.
Core contributors to React Native meet monthly and post their meeting notes on the React Native blog. You can also find ad hoc discussions in the React Native Core Contributors Facebook group.
Code of Conduct #
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
How to contribute #
There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started:
- Simply start using React Native. Go through the Getting Started guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by opening an issue.
- Look through the open issues. Provide workarounds, ask for clarification, or suggest labels. Help triage issues.
- If you find an issue you would like to fix, open a pull request. Issues tagged as
Good First Taskare a good place to get started. - Read through the React Native docs. If you find anything that is confusing or can be improved, you can make edits by clicking "Improve this page" at the bottom of most docs.
- Browse Stack Overflow and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation.
- Take a look at the features requested by others in the community and consider opening a pull request if you see something you want to work on.
Contributions are very welcome. If you think you need help planning your contribution, please hop into #react-native and let people know you're looking for a mentor.
Triaging issues and pull requests #
One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
- Ask for more information if the issue does not provide all the details required by the template.
- Suggest labels that can help categorize issues.
- Flag issues that are stale or that should be closed.
- Ask for test plans and review code.
Adding labels, closing and reopening issues, and merging pull requests is, as you may expect, limited to a subset of contributors. Simply commenting on the issue or pull request can still go a long way towards helping us keep the number of outstanding issues under control.
Once you have become an active contributor in the community, you may gain access to the Facebook GitHub Bot, allowing you to perform some of these operations yourself. You can learn more about the bot in the maintainer's guide.
Our development process #
Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
When a change made on GitHub is approved, it will first be imported into Facebook's internal source control. The change will eventually sync back to GitHub as a single commit once it has passed all internal tests.
Branch organization #
We will do our best to keep
masterin good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and version appropriately so you can lock into a specific version if need be.To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
Bugs #
We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a bug report.
If you have questions about using React Native, the help page list various resources that should help you get started.
We also have a place where you can request features or enhancements. If you see anything you'd like to be implemented, vote it up and explain your use case.
Reporting new issues #
When opening a new issue, always make sure to fill out the issue template. This step is very important! Not doing so may result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
- One issue, one bug: Please report a single bug per issue.
- Provide a Snack: The best way to get attention on your issue is to provide a reduced test case. You can use Snack to demonstrate the issue.
- Provide reproduction steps: List all the steps necessary to reproduce the issue. Provide a Snack or upload a sample project to GitHub. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
- Try out the latest version: Verify that the issue can be reproduced locally by updating your project to use React Native from
master. The bug may have already been fixed!
We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on Stack Overflow or reaching out to the community through other channels.
Security bugs #
Facebook has a bounty program for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.
Pull requests #
Your first pull request #
So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at.
Working on your first Pull Request? You can learn how from this free video series:
How to Contribute to an Open Source Project on GitHub
We have a list of beginner friendly issues to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.
Proposing a change #
If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, we have a place to track feature requests.
If you intend to change the public API, or make any non-trivial changes to the implementation, we recommend filing an issue. This lets us reach an agreement on your proposal before you put significant effort into it.
If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend to file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
Sending a pull request #
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Before submitting a pull request, please make sure the following is done:
- Fork the repository and create your branch from
master. - Add the copyright notice to the top of any new files you've added.
- Describe your test plan in your commit.
- Ensure tests pass on both Travis and Circle CI.
- Make sure your code lints (
npm run lint). - If you haven't already, sign the CLA.
All pull requests should be opened against the
masterbranch.Note: It is not necessary to keep clicking
Merge master to your branchon the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR.Test plan #
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website.
- If you've added code that should be tested, add tests!
- If you've changed APIs, update the documentation.
- If you've updated the docs, verify the website locally and submit screenshots if applicable (see website/README.md)
See What is a Test Plan? to learn more.
Continuous integration tests #
Make sure all tests pass on both Travis and Circle CI. PRs that break tests are unlikely to be merged. Learn more about testing your changes here.
Breaking changes #
When adding a new breaking change, follow this template in your pull request:
### New breaking change here * **Who does this affect**: * **How to migrate**: @@ -26,6 +26,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html index 58bbad363c5..ff24a77867d 100644 --- a/docs/datepickerandroid.html +++ b/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -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. @@ -29,6 +29,6 @@ when using the< apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index ba433f1387c..1532b80e397 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -minDateandmaxDateoptions.DatePickerIOS DatePickerIOS #
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +DatePickerIOS DatePickerIOS #
< apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index e1ca3e0060c..ceda3249c2a 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -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 @@ -22,6 +22,6 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.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-devtools
It 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 #
Projects with Native Code Only
@@ -45,6 +45,6 @@ compile 'com.facebook.stetho:stetho-okhttp3:1.3. apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.47" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.48" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/dimensions.html b/docs/dimensions.html index 02a302d5c44..a31c880aeaa 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -1,4 +1,4 @@ -Dimensions 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 @@ -24,6 +24,6 @@ are the same as the return values of
Dimensions.get('window') \ No newline at end of file diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index ed8c10853d2..e774309114b 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