diff --git a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html
index 41d7c5abed3..b6947710d00 100644
--- a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html
+++ b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html
@@ -199,12 +199,12 @@
_onDirectionChange=()=>{
I18nManager.forceRTL(!this.state.isRTL);
- this.setState({isRTL:!this.state.isRTL});
+ this.setState({ isRTL:!this.state.isRTL });
Alert.alert('Reload this page','Please reload this page to change the UI direction! '+'All examples in this app will be affected. '+
- 'Check them out to see what they look like in RTL layout.',
+ 'Check them out to see what they look like in RTL layout.');};
diff --git a/blog/2016/08/19/right-to-left-support-for-react-native-apps/index.html b/blog/2016/08/19/right-to-left-support-for-react-native-apps/index.html
index 41d7c5abed3..b6947710d00 100644
--- a/blog/2016/08/19/right-to-left-support-for-react-native-apps/index.html
+++ b/blog/2016/08/19/right-to-left-support-for-react-native-apps/index.html
@@ -199,12 +199,12 @@
_onDirectionChange=()=>{
I18nManager.forceRTL(!this.state.isRTL);
- this.setState({isRTL:!this.state.isRTL});
+ this.setState({ isRTL:!this.state.isRTL });
Alert.alert('Reload this page','Please reload this page to change the UI direction! '+'All examples in this app will be affected. '+
- 'Check them out to see what they look like in RTL layout.',
+ 'Check them out to see what they look like in RTL layout.');};
diff --git a/blog/2016/10/25/0.36-headless-js-the-keyboard-api-and-more.html b/blog/2016/10/25/0.36-headless-js-the-keyboard-api-and-more.html
index 36c7d60e9f8..29193218453 100644
--- a/blog/2016/10/25/0.36-headless-js-the-keyboard-api-and-more.html
+++ b/blog/2016/10/25/0.36-headless-js-the-keyboard-api-and-more.html
@@ -77,12 +77,14 @@
};
Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new Headless JS docs to learn more!
The Keyboard API
Working with the on-screen keyboard is now easier with Keyboard. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call Keyboard.dismiss():
Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new Headless JS docs to learn more!
The Keyboard API
Working with the on-screen keyboard is now easier with Keyboard. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call Keyboard.dismiss():
These components are based on PureComponent which means that they will not re-render if props remains shallow-equal. Make sure that everything your renderItem function depends on directly is passed as a prop that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state. For example:
These components are based on PureComponent which means that they will not re-render if props remains shallow-equal. Make sure that everything your renderItem function depends on directly is passed as a prop that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state. For example:
MaskedViewIOS takes props maskElement and children. The children are masked by the maskElement. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the maskElement. We just made complicated blue text.
Since I’m thinking about this animation as steps occurring at different points in time along the complete animation, we will start our Animated.Value at 0, representing 0% complete, and end our value at 100, representing 100% complete.
Our initial component state will be the following.
state ={
- loadingProgress:newAnimated.Value(0),
+ loadingProgress:newAnimated.Value(0)};
When we are ready to begin the animation, we tell Animated to animate this value to 100.
Animated.timing(this.state.loadingProgress,{
toValue:100,
duration:1000,
- useNativeDriver:true,// This is important!
+ useNativeDriver:true// This is important!}).start();
I then try to figure out a rough estimate of the different pieces of the animations and the values I want them to have at different stages of the overall animation. Below is a table of the different pieces of the animation, and what I think their values should be at different points as we progress through time.
Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only Animated.View, Animated.Text, and Animated.Image are able to use style objects that use Animated.Value.
MaskedViewIOS takes props maskElement and children. The children are masked by the maskElement. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the maskElement. We just made complicated blue text.
Since I’m thinking about this animation as steps occurring at different points in time along the complete animation, we will start our Animated.Value at 0, representing 0% complete, and end our value at 100, representing 100% complete.
Our initial component state will be the following.
state ={
- loadingProgress:newAnimated.Value(0),
+ loadingProgress:newAnimated.Value(0)};
When we are ready to begin the animation, we tell Animated to animate this value to 100.
Animated.timing(this.state.loadingProgress,{
toValue:100,
duration:1000,
- useNativeDriver:true,// This is important!
+ useNativeDriver:true// This is important!}).start();
I then try to figure out a rough estimate of the different pieces of the animations and the values I want them to have at different stages of the overall animation. Below is a table of the different pieces of the animation, and what I think their values should be at different points as we progress through time.
Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only Animated.View, Animated.Text, and Animated.Image are able to use style objects that use Animated.Value.
For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, UIWebViews will be formally deprecated. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.
The tail end of these changes were landed in this commit, and will become available in the 0.57 release.
To opt into this new implementation, please use the useWebKit prop:
UIWebView had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged WKWebView features to completely replace it.
For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, UIWebViews will be formally deprecated. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.
The tail end of these changes were landed in this commit, and will become available in the 0.57 release.
To opt into this new implementation, please use the useWebKit prop:
UIWebView had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged WKWebView features to completely replace it.
For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, UIWebViews will be formally deprecated. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.
The tail end of these changes were landed in this commit, and will become available in the 0.57 release.
To opt into this new implementation, please use the useWebKit prop:
UIWebView had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged WKWebView features to completely replace it.
MaskedViewIOS takes props maskElement and children. The children are masked by the maskElement. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the maskElement. We just made complicated blue text.
Since I’m thinking about this animation as steps occurring at different points in time along the complete animation, we will start our Animated.Value at 0, representing 0% complete, and end our value at 100, representing 100% complete.
Our initial component state will be the following.
state ={
- loadingProgress:newAnimated.Value(0),
+ loadingProgress:newAnimated.Value(0)};
When we are ready to begin the animation, we tell Animated to animate this value to 100.
Animated.timing(this.state.loadingProgress,{
toValue:100,
duration:1000,
- useNativeDriver:true,// This is important!
+ useNativeDriver:true// This is important!}).start();
I then try to figure out a rough estimate of the different pieces of the animations and the values I want them to have at different stages of the overall animation. Below is a table of the different pieces of the animation, and what I think their values should be at different points as we progress through time.
Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only Animated.View, Animated.Text, and Animated.Image are able to use style objects that use Animated.Value.
These components are based on PureComponent which means that they will not re-render if props remains shallow-equal. Make sure that everything your renderItem function depends on directly is passed as a prop that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state. For example:
Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new Headless JS docs to learn more!
The Keyboard API
Working with the on-screen keyboard is now easier with Keyboard. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call Keyboard.dismiss():
-
import{Keyboard}from'react-native';
+
import{ Keyboard }from'react-native';// Hide that keyboard!
Keyboard.dismiss();
@@ -477,12 +479,12 @@ $ react-native upgrade
_onDirectionChange=()=>{
I18nManager.forceRTL(!this.state.isRTL);
- this.setState({isRTL:!this.state.isRTL});
+ this.setState({ isRTL:!this.state.isRTL });
Alert.alert('Reload this page','Please reload this page to change the UI direction! '+'All examples in this app will be affected. '+
- 'Check them out to see what they look like in RTL layout.',
+ 'Check them out to see what they look like in RTL layout.');};
diff --git a/docs/0.10/animated.html b/docs/0.10/animated.html
index cc6770de528..b8943e03888 100644
--- a/docs/0.10/animated.html
+++ b/docs/0.10/animated.html
@@ -18,8 +18,8 @@
// Animate value over timethis.state.fadeAnim,// The value to drive{
- toValue:1,// Animate to final value of 1
- },
+ toValue:1// Animate to final value of 1
+ }).start();// Start the animation
Refer to the Animations guide to see additional examples of Animated in action.
@@ -40,7 +40,7 @@
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
this.animateValue.spring({}).start(({ finished })=>{if(finished){
console.log('Animation was completed');}else{
diff --git a/docs/0.10/animated/index.html b/docs/0.10/animated/index.html
index cc6770de528..b8943e03888 100644
--- a/docs/0.10/animated/index.html
+++ b/docs/0.10/animated/index.html
@@ -18,8 +18,8 @@
// Animate value over timethis.state.fadeAnim,// The value to drive{
- toValue:1,// Animate to final value of 1
- },
+ toValue:1// Animate to final value of 1
+ }).start();// Start the animation
Refer to the Animations guide to see additional examples of Animated in action.
@@ -40,7 +40,7 @@
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.10/permissionsandroid/index.html b/docs/0.10/permissionsandroid/index.html
index afff6fb5f05..2334c735d4f 100644
--- a/docs/0.10/permissionsandroid/index.html
+++ b/docs/0.10/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.10/platform-specific-code.html b/docs/0.10/platform-specific-code.html
index 05a09eb5cb6..ed5b6d649e4 100644
--- a/docs/0.10/platform-specific-code.html
+++ b/docs/0.10/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+.
Creates an object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+.
Creates an object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
diff --git a/docs/0.11/animated.html b/docs/0.11/animated.html
index 6649bdd0656..7c277b36b64 100644
--- a/docs/0.11/animated.html
+++ b/docs/0.11/animated.html
@@ -18,8 +18,8 @@
// Animate value over timethis.state.fadeAnim,// The value to drive{
- toValue:1,// Animate to final value of 1
- },
+ toValue:1// Animate to final value of 1
+ }).start();// Start the animation
Refer to the Animations guide to see additional examples of Animated in action.
@@ -40,7 +40,7 @@
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
this.animateValue.spring({}).start(({ finished })=>{if(finished){
console.log('Animation was completed');}else{
diff --git a/docs/0.11/animated/index.html b/docs/0.11/animated/index.html
index 6649bdd0656..7c277b36b64 100644
--- a/docs/0.11/animated/index.html
+++ b/docs/0.11/animated/index.html
@@ -18,8 +18,8 @@
// Animate value over timethis.state.fadeAnim,// The value to drive{
- toValue:1,// Animate to final value of 1
- },
+ toValue:1// Animate to final value of 1
+ }).start();// Start the animation
Refer to the Animations guide to see additional examples of Animated in action.
@@ -40,7 +40,7 @@
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.11/permissionsandroid/index.html b/docs/0.11/permissionsandroid/index.html
index a40121fac3d..85399a11ab8 100644
--- a/docs/0.11/permissionsandroid/index.html
+++ b/docs/0.11/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.11/platform-specific-code.html b/docs/0.11/platform-specific-code.html
index f37e31545f8..c160504065f 100644
--- a/docs/0.11/platform-specific-code.html
+++ b/docs/0.11/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.12/integration-with-existing-apps.html b/docs/0.12/integration-with-existing-apps.html
index c024c0a3fab..8972f68a8b3 100644
--- a/docs/0.12/integration-with-existing-apps.html
+++ b/docs/0.12/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.12/integration-with-existing-apps/index.html b/docs/0.12/integration-with-existing-apps/index.html
index c024c0a3fab..8972f68a8b3 100644
--- a/docs/0.12/integration-with-existing-apps/index.html
+++ b/docs/0.12/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.12/native-modules-android.html b/docs/0.12/native-modules-android.html
index 050774bef6e..7ad9ecd0b96 100644
--- a/docs/0.12/native-modules-android.html
+++ b/docs/0.12/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.12/permissionsandroid/index.html b/docs/0.12/permissionsandroid/index.html
index aadaab1badf..1a4c81cc67d 100644
--- a/docs/0.12/permissionsandroid/index.html
+++ b/docs/0.12/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.12/platform-specific-code.html b/docs/0.12/platform-specific-code.html
index ccba34ab186..76ca9f10771 100644
--- a/docs/0.12/platform-specific-code.html
+++ b/docs/0.12/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.13/integration-with-existing-apps.html b/docs/0.13/integration-with-existing-apps.html
index 9282d462b92..4a85e4df859 100644
--- a/docs/0.13/integration-with-existing-apps.html
+++ b/docs/0.13/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.13/integration-with-existing-apps/index.html b/docs/0.13/integration-with-existing-apps/index.html
index 9282d462b92..4a85e4df859 100644
--- a/docs/0.13/integration-with-existing-apps/index.html
+++ b/docs/0.13/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.13/native-modules-android.html b/docs/0.13/native-modules-android.html
index 704c4598ef5..e94935c7bd3 100644
--- a/docs/0.13/native-modules-android.html
+++ b/docs/0.13/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.13/permissionsandroid/index.html b/docs/0.13/permissionsandroid/index.html
index 1fa15fd0513..e2661c4626e 100644
--- a/docs/0.13/permissionsandroid/index.html
+++ b/docs/0.13/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.13/platform-specific-code.html b/docs/0.13/platform-specific-code.html
index 04fd16ee148..a27e64a06ad 100644
--- a/docs/0.13/platform-specific-code.html
+++ b/docs/0.13/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.
Persisting data:
try{
- await AsyncStorage.setItem('@MySuperStore:key','I like to save it.');
+ await AsyncStorage.setItem(
+ '@MySuperStore:key',
+ 'I like to save it.'
+ );}catch(error){// Error saving data}
@@ -38,21 +41,29 @@
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.14/integration-with-existing-apps.html b/docs/0.14/integration-with-existing-apps.html
index 20b78bf2770..d5e380210c0 100644
--- a/docs/0.14/integration-with-existing-apps.html
+++ b/docs/0.14/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.14/integration-with-existing-apps/index.html b/docs/0.14/integration-with-existing-apps/index.html
index 20b78bf2770..d5e380210c0 100644
--- a/docs/0.14/integration-with-existing-apps/index.html
+++ b/docs/0.14/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.14/native-modules-android.html b/docs/0.14/native-modules-android.html
index c00f79d5992..32f061ea2d3 100644
--- a/docs/0.14/native-modules-android.html
+++ b/docs/0.14/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.14/permissionsandroid/index.html b/docs/0.14/permissionsandroid/index.html
index 7a230e275e8..24d461fbf7b 100644
--- a/docs/0.14/permissionsandroid/index.html
+++ b/docs/0.14/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.14/platform-specific-code.html b/docs/0.14/platform-specific-code.html
index 2c3e7a27d35..418d6b4b564 100644
--- a/docs/0.14/platform-specific-code.html
+++ b/docs/0.14/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.15/integration-with-existing-apps.html b/docs/0.15/integration-with-existing-apps.html
index 0081170a93c..7a74d689d0a 100644
--- a/docs/0.15/integration-with-existing-apps.html
+++ b/docs/0.15/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.15/integration-with-existing-apps/index.html b/docs/0.15/integration-with-existing-apps/index.html
index 0081170a93c..7a74d689d0a 100644
--- a/docs/0.15/integration-with-existing-apps/index.html
+++ b/docs/0.15/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.15/native-modules-android.html b/docs/0.15/native-modules-android.html
index e8df8a2b4cc..644ac6bacc8 100644
--- a/docs/0.15/native-modules-android.html
+++ b/docs/0.15/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.15/permissionsandroid/index.html b/docs/0.15/permissionsandroid/index.html
index 765a3eb8fc7..76fceeedda4 100644
--- a/docs/0.15/permissionsandroid/index.html
+++ b/docs/0.15/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.15/platform-specific-code.html b/docs/0.15/platform-specific-code.html
index dd7b67f9ae2..d28c91d38b3 100644
--- a/docs/0.15/platform-specific-code.html
+++ b/docs/0.15/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.16/integration-with-existing-apps.html b/docs/0.16/integration-with-existing-apps.html
index a14a04ffb1a..981c2d56fe9 100644
--- a/docs/0.16/integration-with-existing-apps.html
+++ b/docs/0.16/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.16/integration-with-existing-apps/index.html b/docs/0.16/integration-with-existing-apps/index.html
index a14a04ffb1a..981c2d56fe9 100644
--- a/docs/0.16/integration-with-existing-apps/index.html
+++ b/docs/0.16/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.16/native-modules-android.html b/docs/0.16/native-modules-android.html
index 5c0c60fcd4c..9d49d4c7d74 100644
--- a/docs/0.16/native-modules-android.html
+++ b/docs/0.16/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.16/permissionsandroid/index.html b/docs/0.16/permissionsandroid/index.html
index 3a2dc85df7b..9c778838dbf 100644
--- a/docs/0.16/permissionsandroid/index.html
+++ b/docs/0.16/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.16/platform-specific-code.html b/docs/0.16/platform-specific-code.html
index 0466197d2a1..7b693889b84 100644
--- a/docs/0.16/platform-specific-code.html
+++ b/docs/0.16/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.17/integration-with-existing-apps.html b/docs/0.17/integration-with-existing-apps.html
index b998773ef33..39faf2938a1 100644
--- a/docs/0.17/integration-with-existing-apps.html
+++ b/docs/0.17/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.17/integration-with-existing-apps/index.html b/docs/0.17/integration-with-existing-apps/index.html
index b998773ef33..39faf2938a1 100644
--- a/docs/0.17/integration-with-existing-apps/index.html
+++ b/docs/0.17/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.17/native-modules-android.html b/docs/0.17/native-modules-android.html
index a81db9eb701..c73a763831c 100644
--- a/docs/0.17/native-modules-android.html
+++ b/docs/0.17/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.17/permissionsandroid/index.html b/docs/0.17/permissionsandroid/index.html
index 3df953f846a..36a70708d44 100644
--- a/docs/0.17/permissionsandroid/index.html
+++ b/docs/0.17/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.17/platform-specific-code.html b/docs/0.17/platform-specific-code.html
index 315742ad79b..1858d353e37 100644
--- a/docs/0.17/platform-specific-code.html
+++ b/docs/0.17/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.18/integration-with-existing-apps.html b/docs/0.18/integration-with-existing-apps.html
index a36580ca897..a4b68239aed 100644
--- a/docs/0.18/integration-with-existing-apps.html
+++ b/docs/0.18/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.18/integration-with-existing-apps/index.html b/docs/0.18/integration-with-existing-apps/index.html
index a36580ca897..a4b68239aed 100644
--- a/docs/0.18/integration-with-existing-apps/index.html
+++ b/docs/0.18/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.18/native-modules-android.html b/docs/0.18/native-modules-android.html
index 80d955deb6d..226b248c60d 100644
--- a/docs/0.18/native-modules-android.html
+++ b/docs/0.18/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.18/permissionsandroid/index.html b/docs/0.18/permissionsandroid/index.html
index 96240a1c36f..e55c0ce3613 100644
--- a/docs/0.18/permissionsandroid/index.html
+++ b/docs/0.18/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.18/platform-specific-code.html b/docs/0.18/platform-specific-code.html
index 4a919dc6e7c..abb588b415b 100644
--- a/docs/0.18/platform-specific-code.html
+++ b/docs/0.18/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.19/integration-with-existing-apps.html b/docs/0.19/integration-with-existing-apps.html
index 4982048f19a..1a49c8fa8a3 100644
--- a/docs/0.19/integration-with-existing-apps.html
+++ b/docs/0.19/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.19/integration-with-existing-apps/index.html b/docs/0.19/integration-with-existing-apps/index.html
index 4982048f19a..1a49c8fa8a3 100644
--- a/docs/0.19/integration-with-existing-apps/index.html
+++ b/docs/0.19/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.19/native-modules-android.html b/docs/0.19/native-modules-android.html
index 0e2bbdc4ac5..cb0b1347e70 100644
--- a/docs/0.19/native-modules-android.html
+++ b/docs/0.19/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.19/permissionsandroid/index.html b/docs/0.19/permissionsandroid/index.html
index e99d7f51fc3..0ca57a48c4e 100644
--- a/docs/0.19/permissionsandroid/index.html
+++ b/docs/0.19/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.19/platform-specific-code.html b/docs/0.19/platform-specific-code.html
index d027106adfc..8d2253f0058 100644
--- a/docs/0.19/platform-specific-code.html
+++ b/docs/0.19/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.20/integration-with-existing-apps.html b/docs/0.20/integration-with-existing-apps.html
index d947e35c31c..2072c8dfdb1 100644
--- a/docs/0.20/integration-with-existing-apps.html
+++ b/docs/0.20/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.20/integration-with-existing-apps/index.html b/docs/0.20/integration-with-existing-apps/index.html
index d947e35c31c..2072c8dfdb1 100644
--- a/docs/0.20/integration-with-existing-apps/index.html
+++ b/docs/0.20/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.20/native-modules-android.html b/docs/0.20/native-modules-android.html
index 4163823133e..75998a4cab3 100644
--- a/docs/0.20/native-modules-android.html
+++ b/docs/0.20/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.20/permissionsandroid/index.html b/docs/0.20/permissionsandroid/index.html
index ecb75b20546..a489f2f3a0d 100644
--- a/docs/0.20/permissionsandroid/index.html
+++ b/docs/0.20/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.20/platform-specific-code.html b/docs/0.20/platform-specific-code.html
index aa15d279a7a..8e2de1da473 100644
--- a/docs/0.20/platform-specific-code.html
+++ b/docs/0.20/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.21/integration-with-existing-apps.html b/docs/0.21/integration-with-existing-apps.html
index f31b452af65..a846af9531f 100644
--- a/docs/0.21/integration-with-existing-apps.html
+++ b/docs/0.21/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.21/integration-with-existing-apps/index.html b/docs/0.21/integration-with-existing-apps/index.html
index f31b452af65..a846af9531f 100644
--- a/docs/0.21/integration-with-existing-apps/index.html
+++ b/docs/0.21/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.21/native-modules-android.html b/docs/0.21/native-modules-android.html
index d14492fb4be..fcb1d83086c 100644
--- a/docs/0.21/native-modules-android.html
+++ b/docs/0.21/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.21/permissionsandroid/index.html b/docs/0.21/permissionsandroid/index.html
index d21ac2d6091..5c586a3f9a9 100644
--- a/docs/0.21/permissionsandroid/index.html
+++ b/docs/0.21/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.21/platform-specific-code.html b/docs/0.21/platform-specific-code.html
index 9c5f40eafb5..7bccfe23cc4 100644
--- a/docs/0.21/platform-specific-code.html
+++ b/docs/0.21/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.22/integration-with-existing-apps.html b/docs/0.22/integration-with-existing-apps.html
index 997b1c75d91..cb0b36bdc30 100644
--- a/docs/0.22/integration-with-existing-apps.html
+++ b/docs/0.22/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.22/integration-with-existing-apps/index.html b/docs/0.22/integration-with-existing-apps/index.html
index 997b1c75d91..cb0b36bdc30 100644
--- a/docs/0.22/integration-with-existing-apps/index.html
+++ b/docs/0.22/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.22/native-modules-android.html b/docs/0.22/native-modules-android.html
index da1fc38e8c2..ec1275105e3 100644
--- a/docs/0.22/native-modules-android.html
+++ b/docs/0.22/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.22/permissionsandroid/index.html b/docs/0.22/permissionsandroid/index.html
index 4edc1eef6d1..8926d9bc601 100644
--- a/docs/0.22/permissionsandroid/index.html
+++ b/docs/0.22/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.22/platform-specific-code.html b/docs/0.22/platform-specific-code.html
index a3360fbe2f6..e1b343e4f49 100644
--- a/docs/0.22/platform-specific-code.html
+++ b/docs/0.22/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.23/integration-with-existing-apps.html b/docs/0.23/integration-with-existing-apps.html
index b082abbbee6..556bce5138a 100644
--- a/docs/0.23/integration-with-existing-apps.html
+++ b/docs/0.23/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.23/integration-with-existing-apps/index.html b/docs/0.23/integration-with-existing-apps/index.html
index b082abbbee6..556bce5138a 100644
--- a/docs/0.23/integration-with-existing-apps/index.html
+++ b/docs/0.23/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.23/native-modules-android.html b/docs/0.23/native-modules-android.html
index df67564f651..71f8fe0abc4 100644
--- a/docs/0.23/native-modules-android.html
+++ b/docs/0.23/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.23/permissionsandroid/index.html b/docs/0.23/permissionsandroid/index.html
index bc6e1d31cf5..b456993a06c 100644
--- a/docs/0.23/permissionsandroid/index.html
+++ b/docs/0.23/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.23/platform-specific-code.html b/docs/0.23/platform-specific-code.html
index e2a60af87bf..9049863c988 100644
--- a/docs/0.23/platform-specific-code.html
+++ b/docs/0.23/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
The example below shows how to use Slider to change a value used by Text. The value is stored using the state of the root component (App). The same component subscribes to the onValueChange of Slider and changes the value using setState.
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.24/integration-with-existing-apps.html b/docs/0.24/integration-with-existing-apps.html
index 1ab90342df7..37cd2d3cf9e 100644
--- a/docs/0.24/integration-with-existing-apps.html
+++ b/docs/0.24/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.24/integration-with-existing-apps/index.html b/docs/0.24/integration-with-existing-apps/index.html
index 1ab90342df7..37cd2d3cf9e 100644
--- a/docs/0.24/integration-with-existing-apps/index.html
+++ b/docs/0.24/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.24/native-modules-android.html b/docs/0.24/native-modules-android.html
index 61213ae2ded..bf7495a8422 100644
--- a/docs/0.24/native-modules-android.html
+++ b/docs/0.24/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.24/permissionsandroid/index.html b/docs/0.24/permissionsandroid/index.html
index b4adbb5b658..b0152636aab 100644
--- a/docs/0.24/permissionsandroid/index.html
+++ b/docs/0.24/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.24/platform-specific-code.html b/docs/0.24/platform-specific-code.html
index 76cf614c5d5..af1f7c59f8a 100644
--- a/docs/0.24/platform-specific-code.html
+++ b/docs/0.24/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.25/integration-with-existing-apps.html b/docs/0.25/integration-with-existing-apps.html
index 14b92eaf15a..eed2932ae8a 100644
--- a/docs/0.25/integration-with-existing-apps.html
+++ b/docs/0.25/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.25/integration-with-existing-apps/index.html b/docs/0.25/integration-with-existing-apps/index.html
index 14b92eaf15a..eed2932ae8a 100644
--- a/docs/0.25/integration-with-existing-apps/index.html
+++ b/docs/0.25/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.25/native-modules-android.html b/docs/0.25/native-modules-android.html
index 5daa3214b2e..32a7c0ea382 100644
--- a/docs/0.25/native-modules-android.html
+++ b/docs/0.25/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.25/permissionsandroid/index.html b/docs/0.25/permissionsandroid/index.html
index 66a6ab5c64a..a4abc03f999 100644
--- a/docs/0.25/permissionsandroid/index.html
+++ b/docs/0.25/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.25/platform-specific-code.html b/docs/0.25/platform-specific-code.html
index fef365f9beb..957aca66ba2 100644
--- a/docs/0.25/platform-specific-code.html
+++ b/docs/0.25/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.26/integration-with-existing-apps.html b/docs/0.26/integration-with-existing-apps.html
index 0eda23fcb0f..8607b79c51a 100644
--- a/docs/0.26/integration-with-existing-apps.html
+++ b/docs/0.26/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.26/integration-with-existing-apps/index.html b/docs/0.26/integration-with-existing-apps/index.html
index 0eda23fcb0f..8607b79c51a 100644
--- a/docs/0.26/integration-with-existing-apps/index.html
+++ b/docs/0.26/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.26/native-modules-android.html b/docs/0.26/native-modules-android.html
index 29d08cb30c5..297a2aaf1fc 100644
--- a/docs/0.26/native-modules-android.html
+++ b/docs/0.26/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.26/permissionsandroid/index.html b/docs/0.26/permissionsandroid/index.html
index 3a8caa46544..61787d9f7f6 100644
--- a/docs/0.26/permissionsandroid/index.html
+++ b/docs/0.26/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.26/platform-specific-code.html b/docs/0.26/platform-specific-code.html
index a76a2d022b7..baa4d608e3f 100644
--- a/docs/0.26/platform-specific-code.html
+++ b/docs/0.26/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.27/integration-with-existing-apps.html b/docs/0.27/integration-with-existing-apps.html
index b5ec0ebe7e1..0fd56a719ff 100644
--- a/docs/0.27/integration-with-existing-apps.html
+++ b/docs/0.27/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.27/integration-with-existing-apps/index.html b/docs/0.27/integration-with-existing-apps/index.html
index b5ec0ebe7e1..0fd56a719ff 100644
--- a/docs/0.27/integration-with-existing-apps/index.html
+++ b/docs/0.27/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.27/native-modules-android.html b/docs/0.27/native-modules-android.html
index 903258f5eed..c4ff546cc7a 100644
--- a/docs/0.27/native-modules-android.html
+++ b/docs/0.27/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.27/permissionsandroid/index.html b/docs/0.27/permissionsandroid/index.html
index 6c029748884..897cdaaaa68 100644
--- a/docs/0.27/permissionsandroid/index.html
+++ b/docs/0.27/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.27/platform-specific-code.html b/docs/0.27/platform-specific-code.html
index 2b9d6755269..3c1422b09d0 100644
--- a/docs/0.27/platform-specific-code.html
+++ b/docs/0.27/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.28/integration-with-existing-apps.html b/docs/0.28/integration-with-existing-apps.html
index 1a523141d9d..ed53481aa0b 100644
--- a/docs/0.28/integration-with-existing-apps.html
+++ b/docs/0.28/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.28/integration-with-existing-apps/index.html b/docs/0.28/integration-with-existing-apps/index.html
index 1a523141d9d..ed53481aa0b 100644
--- a/docs/0.28/integration-with-existing-apps/index.html
+++ b/docs/0.28/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.28/native-modules-android.html b/docs/0.28/native-modules-android.html
index 2f406d7b331..7b316a1594a 100644
--- a/docs/0.28/native-modules-android.html
+++ b/docs/0.28/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.28/permissionsandroid/index.html b/docs/0.28/permissionsandroid/index.html
index 7d47b15b031..29a0ff56fb0 100644
--- a/docs/0.28/permissionsandroid/index.html
+++ b/docs/0.28/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.28/platform-specific-code.html b/docs/0.28/platform-specific-code.html
index 655decf36e5..805d9db0b07 100644
--- a/docs/0.28/platform-specific-code.html
+++ b/docs/0.28/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.29/integration-with-existing-apps.html b/docs/0.29/integration-with-existing-apps.html
index 5c755eff4b8..ffe81fe44e2 100644
--- a/docs/0.29/integration-with-existing-apps.html
+++ b/docs/0.29/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.29/integration-with-existing-apps/index.html b/docs/0.29/integration-with-existing-apps/index.html
index 5c755eff4b8..ffe81fe44e2 100644
--- a/docs/0.29/integration-with-existing-apps/index.html
+++ b/docs/0.29/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The Modal component is a way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.
The Modal component is a way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.29/native-modules-android.html b/docs/0.29/native-modules-android.html
index a98626310b5..3c3e81c20c4 100644
--- a/docs/0.29/native-modules-android.html
+++ b/docs/0.29/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.29/permissionsandroid/index.html b/docs/0.29/permissionsandroid/index.html
index dba8364a1f4..b18eb2da1c3 100644
--- a/docs/0.29/permissionsandroid/index.html
+++ b/docs/0.29/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.29/platform-specific-code.html b/docs/0.29/platform-specific-code.html
index da2e1919a50..888385e0135 100644
--- a/docs/0.29/platform-specific-code.html
+++ b/docs/0.29/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.30/integration-with-existing-apps.html b/docs/0.30/integration-with-existing-apps.html
index c4a5ae631cb..e5edf3a6275 100644
--- a/docs/0.30/integration-with-existing-apps.html
+++ b/docs/0.30/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.30/integration-with-existing-apps/index.html b/docs/0.30/integration-with-existing-apps/index.html
index c4a5ae631cb..e5edf3a6275 100644
--- a/docs/0.30/integration-with-existing-apps/index.html
+++ b/docs/0.30/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The Modal component is a way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.
The Modal component is a way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.30/native-modules-android.html b/docs/0.30/native-modules-android.html
index 42c452a52d1..be8f86470a1 100644
--- a/docs/0.30/native-modules-android.html
+++ b/docs/0.30/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.30/permissionsandroid/index.html b/docs/0.30/permissionsandroid/index.html
index dff895646c3..f557b149f03 100644
--- a/docs/0.30/permissionsandroid/index.html
+++ b/docs/0.30/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.30/platform-specific-code.html b/docs/0.30/platform-specific-code.html
index 0af9fd690ff..00f728fc919 100644
--- a/docs/0.30/platform-specific-code.html
+++ b/docs/0.30/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Take a look at the Configuring animations section of the Animated API reference to learn more about all the config parameters supported by the built-in animations.
@@ -149,19 +149,19 @@
// decay, then spring to start and twirl
Animated.decay(position,{// coast to a stop
- velocity:{x: gestureState.vx, y: gestureState.vy},// velocity from gesture release
- deceleration:0.997,
+ velocity:{ x: gestureState.vx, y: gestureState.vy },// velocity from gesture release
+ deceleration:0.997}),
Animated.parallel([// after decay, in parallel:
Animated.spring(position,{
- toValue:{x:0, y:0},// return to start
+ toValue:{ x:0, y:0}// return to start}),
Animated.timing(twirl,{// and twirl
- toValue:360,
- }),
- ]),
+ toValue:360
+ })
+ ])]).start();// start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
@@ -198,7 +198,7 @@ Animated.spr
interpolate() supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but you can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values. Set the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
<Animated.Viewstyle={{
transform:[
- {scale:this.state.scale},
- {rotateY:this.state.rotateY},
- {perspective:1000},// without this line this Animation will not render on Android while working fine on iOS
- ],
+ { scale:this.state.scale },
+ { rotateY:this.state.rotateY },
+ { perspective:1000}// without this line this Animation will not render on Android while working fine on iOS
+ ]}}/>
Return a WebView component with the prop nativeConfig.component set to your native component (see below)
To get your native component, you must use requireNativeComponent: the same as for regular custom components. However, you must pass in an extra third argument, WebView.extraNativeComponentConfig. This third argument contains prop types that are only required for native code.
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
The JS API
A task is an async function that you register on AppRegistry, similar to registering React applications:
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.
-
<Imagesource={{uri:'something.jpg'}}/>
+
<Imagesource={{ uri:'something.jpg'}}/>
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
diff --git a/docs/0.31/integration-with-existing-apps.html b/docs/0.31/integration-with-existing-apps.html
index d17af00543f..73a68e0cb5f 100644
--- a/docs/0.31/integration-with-existing-apps.html
+++ b/docs/0.31/integration-with-existing-apps.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
diff --git a/docs/0.31/integration-with-existing-apps/index.html b/docs/0.31/integration-with-existing-apps/index.html
index d17af00543f..73a68e0cb5f 100644
--- a/docs/0.31/integration-with-existing-apps/index.html
+++ b/docs/0.31/integration-with-existing-apps/index.html
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies f
2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>
import React from'react';
-import{AppRegistry, StyleSheet, Text, View}from'react-native';
+import{
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+}from'react-native';classRNHighScoresextendsReact.Component{render(){
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies f
));return(<Viewstyle={styles.container}>
- <Textstyle={styles.highScoresTitle}>2048 High Scores!</Text>
+ <Textstyle={styles.highScoresTitle}>
+ 2048 High Scores!
+ </Text><Textstyle={styles.scores}>{contents}</Text></View>);
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies f
flex:1,
justifyContent:'center',
alignItems:'center',
- backgroundColor:'#FFFFFF',
+ backgroundColor:'#FFFFFF'},
highScoresTitle:{
fontSize:20,
textAlign:'center',
- margin:10,
+ margin:10},
scores:{
textAlign:'center',
color:'#333333',
- marginBottom:5,
- },
+ marginBottom:5
+ }});// Module name
@@ -499,7 +506,12 @@ $ react-native run-ios2. Add your React Native code
In your index.js, create your component. In our sample here, we will add a <Text> component within a styled <View>:
3. Configure permissions for development error overlay
If your app is targeting the Android API level 23 or greater, make sure you have the permission android.permission.SYSTEM_ALERT_WINDOW enabled for the development build. You can check this with Settings.canDrawOverlays(this);. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in onCreate() method.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
This performs the same function as the cloneWithRows function but here you also specify what your sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.
sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.
The Modal component is a way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.
The Modal component is a way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.
Now to actually disable zooming, we set the property in JS:
To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React PropTypes:
@@ -418,7 +418,7 @@ MapView.propTypes .findNodeHandle(this),
UIManager.getViewManagerConfig('RNCMyNativeView').Commands
.callNativeMethod,
- [],
+ []);};
diff --git a/docs/0.31/native-modules-android.html b/docs/0.31/native-modules-android.html
index a4f8b70ea53..3e4e5effc4a 100644
--- a/docs/0.31/native-modules-android.html
+++ b/docs/0.31/native-modules-android.html
@@ -199,7 +199,7 @@ ReadableArray -><
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
-import{NativeModules}from'react-native';
+import{ NativeModules }from'react-native';
module.exports = NativeModules.ToastExample;
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
Now, from your other JavaScript file you can call the method like this:
@@ -246,7 +246,7 @@ ToastExample.},(x, y, width, height)=>{
console.log(x +':'+ y +':'+ width +':'+ height);
- },
+ });
A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
@@ -286,12 +286,16 @@ ToastExample.The JavaScript counterpart of this method returns a Promise. This means you can use the await keyword within an async function to call it and wait for its result:
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
@@ -154,14 +157,14 @@ CalendarManager.CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.getTime(),
+ date.getTime());// passing date as number of milliseconds since Unix epoch
or
CalendarManager.addEvent('Birthday Party','4 Privet Drive, Surrey',
- date.toISOString(),
+ date.toISOString());// passing date as ISO-8601 string
And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation.
To set up the Navigator you provide one or more objects called routes, to identify each scene. You also provide a renderScene function that renders the scene for each route object.
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.31/permissionsandroid/index.html b/docs/0.31/permissionsandroid/index.html
index 1cbff563de8..1fec449d123 100644
--- a/docs/0.31/permissionsandroid/index.html
+++ b/docs/0.31/permissionsandroid/index.html
@@ -26,7 +26,7 @@
On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so check and request should always be true.
If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional rationale argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.
Example
-
import{PermissionsAndroid}from'react-native';
+
import{ PermissionsAndroid }from'react-native';asyncfunctionrequestCameraPermission(){try{
@@ -36,8 +36,8 @@
title:'Cool Photo App Camera Permission',
message:'Cool Photo App needs access to your camera '+
- 'so you can take awesome pictures.',
- },
+ 'so you can take awesome pictures.'
+ });if(granted === PermissionsAndroid.RESULTS.GRANTED){
console.log('You can use the camera');
diff --git a/docs/0.31/platform-specific-code.html b/docs/0.31/platform-specific-code.html
index 002639b3866..7ff385f7c89 100644
--- a/docs/0.31/platform-specific-code.html
+++ b/docs/0.31/platform-specific-code.html
@@ -77,42 +77,42 @@
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
On iOS, the Version is a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.
Platform module
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.