Animated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
@@ -34,7 +34,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a simple spring physics model.Animated.spring() provides a basic spring physics model.Animated.timing() animates a value over time using easing functions.
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.
@@ -52,7 +52,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -71,7 +71,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
@@ -208,14 +208,14 @@
config is an object that may have the following options.
Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
-The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
+The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.
-Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
+Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
stiffness: The spring stiffness coefficient. Default 100.damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.Animated · React Native EditAnimated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
-The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
+ EditAnimated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
+The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
@@ -34,7 +34,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a simple spring physics model.Animated.spring() provides a basic spring physics model.Animated.timing() animates a value over time using easing functions.
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.
@@ -52,7 +52,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -71,7 +71,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
@@ -208,14 +208,14 @@
config is an object that may have the following options.
Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
-The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
+The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.
-Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
+Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
stiffness: The spring stiffness coefficient. Default 100.damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.
EditAnimations
Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.
Animated API
-The Animated API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
+The Animated API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
Animated exports six animatable component types: View, Text, Image, ScrollView, FlatList and SectionList, but you can also create your own using Animated.createAnimatedComponent().
For example, a container view that fades in when it is mounted may look like this:
Let's break down what's happening here. In the FadeInView constructor, a new Animated.Value called fadeAnim is initialized as part of state. The opacity property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
This is done in an optimized way that is faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
Configuring animations
Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
@@ -142,7 +142,7 @@
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.
Composing animations
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which simply take an array of animations to execute and automatically calls start()/stop() as needed.
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which take an array of animations to execute and automatically calls start()/stop() as needed.
For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
Animated.sequence([
// decay, then spring to start and twirl
@@ -177,13 +177,13 @@ Animated.spr
Interpolation
Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-A simple mapping to convert a 0-1 range to a 0-100 range would be:
+A mapping to convert a 0-1 range to a 0-100 range would be:
value.interpolate({
inputRange: [0, 1],
outputRange: [0, 100],
});
-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 easily be done by modifying style from the example above like so:
+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:
style={{
opacity: this.state.fadeAnim, // Binds directly
transform: [{
@@ -222,7 +222,7 @@ Animated.spr
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. Just 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:
+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:
Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
@@ -231,7 +231,7 @@ Animated.tim
}),
}).start();
-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 simple wrapper that basically 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.
+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.
Tracking gestures
Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value):
@@ -254,7 +254,7 @@ Animated.tim
])}
Responding to the current animation value
-You may notice that there is no obvious way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
spring.stopAnimation(callback) will stop the animation and invoke callback with the final value. This is useful when making gesture transitions.spring.addListener(callback) will invoke callback asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.Animated is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out Animated.Value.addListener as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
Using the native driver
The Animated API is designed to be serializable. By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-Using the native driver for normal animations is quite simple. Just add useNativeDriver: true to the animation config when starting it.
+To use the native driver for normal animations add useNativeDriver: true to the animation config when starting it.
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
diff --git a/docs/0.10/animations/index.html b/docs/0.10/animations/index.html
index a93a06317c8..01faf5225f2 100644
--- a/docs/0.10/animations/index.html
+++ b/docs/0.10/animations/index.html
@@ -71,7 +71,7 @@
EditAnimations
Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.
Animated API
-The Animated API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
+The Animated API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
Animated exports six animatable component types: View, Text, Image, ScrollView, FlatList and SectionList, but you can also create your own using Animated.createAnimatedComponent().
For example, a container view that fades in when it is mounted may look like this:
Let's break down what's happening here. In the FadeInView constructor, a new Animated.Value called fadeAnim is initialized as part of state. The opacity property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
This is done in an optimized way that is faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
Configuring animations
Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
@@ -142,7 +142,7 @@
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.
Composing animations
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which simply take an array of animations to execute and automatically calls start()/stop() as needed.
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which take an array of animations to execute and automatically calls start()/stop() as needed.
For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
Animated.sequence([
// decay, then spring to start and twirl
@@ -177,13 +177,13 @@ Animated.spr
Interpolation
Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-A simple mapping to convert a 0-1 range to a 0-100 range would be:
+A mapping to convert a 0-1 range to a 0-100 range would be:
value.interpolate({
inputRange: [0, 1],
outputRange: [0, 100],
});
-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 easily be done by modifying style from the example above like so:
+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:
style={{
opacity: this.state.fadeAnim, // Binds directly
transform: [{
@@ -222,7 +222,7 @@ Animated.spr
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. Just 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:
+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:
Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
@@ -231,7 +231,7 @@ Animated.tim
}),
}).start();
-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 simple wrapper that basically 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.
+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.
Tracking gestures
Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value):
@@ -254,7 +254,7 @@ Animated.tim
])}
Responding to the current animation value
-You may notice that there is no obvious way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
spring.stopAnimation(callback) will stop the animation and invoke callback with the final value. This is useful when making gesture transitions.spring.addListener(callback) will invoke callback asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.Animated is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out Animated.Value.addListener as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
Using the native driver
The Animated API is designed to be serializable. By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-Using the native driver for normal animations is quite simple. Just add useNativeDriver: true to the animation config when starting it.
+To use the native driver for normal animations add useNativeDriver: true to the animation config when starting it.
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
diff --git a/docs/0.10/app-extensions.html b/docs/0.10/app-extensions.html
index 51c70628118..ee068d895e8 100644
--- a/docs/0.10/app-extensions.html
+++ b/docs/0.10/app-extensions.html
@@ -70,12 +70,12 @@
});
EditApp Extensions
App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the App Extension Programming Guide. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.
Memory use in extensions
-As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
+As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
We highly recommend that you watch Conrad Kramer's talk on Memory Use in Extensions to learn more about this topic.
Today widget
The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':
-Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use Xcode's Instruments to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.
+Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use Xcode's Instruments to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, you can quickly go over the 16 MB limit by performing common operations, such as fetching data from an API.
To experiment with the limits of React Native Today widget implementations, try extending the example project in react-native-today-widget.
Other app extensions
Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is react-native-ios-share-extension.
diff --git a/docs/0.10/app-extensions/index.html b/docs/0.10/app-extensions/index.html
index 51c70628118..ee068d895e8 100644
--- a/docs/0.10/app-extensions/index.html
+++ b/docs/0.10/app-extensions/index.html
@@ -70,12 +70,12 @@
});
EditApp Extensions
App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the App Extension Programming Guide. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.
Memory use in extensions
-As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
+As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
We highly recommend that you watch Conrad Kramer's talk on Memory Use in Extensions to learn more about this topic.
Today widget
The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':
-Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use Xcode's Instruments to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.
+Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use Xcode's Instruments to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, you can quickly go over the 16 MB limit by performing common operations, such as fetching data from an API.
To experiment with the limits of React Native Today widget implementations, try extending the example project in react-native-today-widget.
Other app extensions
Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is react-native-ios-share-extension.
diff --git a/docs/0.10/asyncstorage.html b/docs/0.10/asyncstorage.html
index f50113683f7..23d1d633027 100644
--- a/docs/0.10/asyncstorage.html
+++ b/docs/0.10/asyncstorage.html
@@ -1,4 +1,4 @@
-AsyncStorage · React Native EditAsyncStorage
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
+ EditAsyncStorage
AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.
On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.
-The AsyncStorage JavaScript code is a simple facade that provides a clear JavaScript API, real Error objects, and simple non-multi functions. Each method in the API returns a Promise object.
+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.');
diff --git a/docs/0.10/asyncstorage/index.html b/docs/0.10/asyncstorage/index.html
index f50113683f7..23d1d633027 100644
--- a/docs/0.10/asyncstorage/index.html
+++ b/docs/0.10/asyncstorage/index.html
@@ -1,4 +1,4 @@
-AsyncStorage · React Native EditAsyncStorage
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
+ EditAsyncStorage
AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.
On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.
-The AsyncStorage JavaScript code is a simple facade that provides a clear JavaScript API, real Error objects, and simple non-multi functions. Each method in the API returns a Promise object.
+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.');
diff --git a/docs/0.10/building-for-apple-tv.html b/docs/0.10/building-for-apple-tv.html
index 94c72f88f7f..51c85ef2b10 100644
--- a/docs/0.10/building-for-apple-tv.html
+++ b/docs/0.10/building-for-apple-tv.html
@@ -1,4 +1,4 @@
-Building For TV Devices · React Native
EditBuilding For TV Devices
TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
+ EditBuilding For TV Devices
TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
-
@@ -125,7 +125,7 @@
General support for tvOS: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight and TouchableOpacity will "just work". In particular:
+Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight and TouchableOpacity will work as expected. In particular:
onFocus will be executed when the touchable view goes into focusonBlur will be executed when the touchable view goes out of focus
-Access to touchable controls: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity and TouchableNativeFeedback will "just work". In particular:
+Access to touchable controls: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity and TouchableNativeFeedback will work as expected. In particular:
onFocus will be executed when the touchable view goes into focusonBlur will be executed when the touchable view goes out of focus
-Dev Menu support: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
Dev Menu support: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
TV remote animations: RCTTVView native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
Back navigation with the TV remote menu button: The BackHandler component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
TabBarIOS behavior: The TabBarIOS component wraps the native UITabBar API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see this issue), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.
-- Dev Menu support: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
+- Dev Menu support: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
Known issues:
-- ListView scrolling. The issue can be easily worked around by setting
removeClippedSubviews to false in ListView and similar components. For more discussion of this issue, see this PR.
+- ListView scrolling. The issue can be worked around by setting
removeClippedSubviews to false in ListView and similar components. For more discussion of this issue, see this PR.
diff --git a/docs/0.10/building-for-apple-tv/index.html b/docs/0.10/building-for-apple-tv/index.html
index 94c72f88f7f..51c85ef2b10 100644
--- a/docs/0.10/building-for-apple-tv/index.html
+++ b/docs/0.10/building-for-apple-tv/index.html
@@ -1,4 +1,4 @@
-Building For TV Devices · React Native
EditBuilding For TV Devices
TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
+ EditBuilding For TV Devices
TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
-
@@ -125,7 +125,7 @@
General support for tvOS: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight and TouchableOpacity will "just work". In particular:
+Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight and TouchableOpacity will work as expected. In particular:
onFocus will be executed when the touchable view goes into focusonBlur will be executed when the touchable view goes out of focus
-Access to touchable controls: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity and TouchableNativeFeedback will "just work". In particular:
+Access to touchable controls: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity and TouchableNativeFeedback will work as expected. In particular:
onFocus will be executed when the touchable view goes into focusonBlur will be executed when the touchable view goes out of focus
-Dev Menu support: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
Dev Menu support: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
TV remote animations: RCTTVView native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
Back navigation with the TV remote menu button: The BackHandler component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
TabBarIOS behavior: The TabBarIOS component wraps the native UITabBar API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see this issue), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.
-- Dev Menu support: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
+- Dev Menu support: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
Known issues:
-- ListView scrolling. The issue can be easily worked around by setting
removeClippedSubviews to false in ListView and similar components. For more discussion of this issue, see this PR.
+- ListView scrolling. The issue can be worked around by setting
removeClippedSubviews to false in ListView and similar components. For more discussion of this issue, see this PR.
diff --git a/docs/0.10/colors.html b/docs/0.10/colors.html
index e731d0de3cc..398a7f6c946 100644
--- a/docs/0.10/colors.html
+++ b/docs/0.10/colors.html
@@ -92,6 +92,7 @@
Named colors
You can also use color names as values. React Native follows the CSS3 specification:
+
Named colors
You can also use color names as values. React Native follows the CSS3 specification:
+
-
-
diff --git a/docs/0.10/communication-android.html b/docs/0.10/communication-android.html
index a50aab2e14f..76e5702dc53 100644
--- a/docs/0.10/communication-android.html
+++ b/docs/0.10/communication-android.html
@@ -15,7 +15,7 @@
EditCommunication between native and React Native
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
-The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
+The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.
Properties
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native
@@ -78,7 +78,7 @@ mReactRootView.setAppProperties(updatedProps);
Note: Currently, JS functions componentWillReceiveProps and componentWillUpdateProps of the top level RN component will not be called after a prop update. However, you can access the new props in componentWillMount function.
Passing properties from React Native to native
-The problem exposing properties of native components is covered in detail in this article. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp, then just use them in React Native as if the component was an ordinary React Native component.
+The problem exposing properties of native components is covered in detail in this article. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp, then use them in React Native as if the component was an ordinary React Native component.
Limits of properties
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks (described here), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
diff --git a/docs/0.10/communication-android/index.html b/docs/0.10/communication-android/index.html
index a50aab2e14f..76e5702dc53 100644
--- a/docs/0.10/communication-android/index.html
+++ b/docs/0.10/communication-android/index.html
@@ -15,7 +15,7 @@
EditCommunication between native and React Native
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
-The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
+The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.
Properties
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native
@@ -78,7 +78,7 @@ mReactRootView.setAppProperties(updatedProps);
Note: Currently, JS functions componentWillReceiveProps and componentWillUpdateProps of the top level RN component will not be called after a prop update. However, you can access the new props in componentWillMount function.
Passing properties from React Native to native
-The problem exposing properties of native components is covered in detail in this article. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp, then just use them in React Native as if the component was an ordinary React Native component.
+The problem exposing properties of native components is covered in detail in this article. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp, then use them in React Native as if the component was an ordinary React Native component.
Limits of properties
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks (described here), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
diff --git a/docs/0.10/communication-ios.html b/docs/0.10/communication-ios.html
index 08f3584ba89..bd739a82f26 100644
--- a/docs/0.10/communication-ios.html
+++ b/docs/0.10/communication-ios.html
@@ -71,7 +71,7 @@
EditCommunication between native and React Native
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
-The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
+The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.
Properties
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native
@@ -113,7 +113,7 @@ rootView.appProperties = @{@"images" : imageLis
Note: Currently, JS function componentWillUpdateProps of the top level RN component will not be called after a prop update. However, you can access the new props in componentDidMount function.
Passing properties from React Native to native
-The problem exposing properties of native components is covered in detail in this article. In short, export properties with RCT_CUSTOM_VIEW_PROPERTY macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.
+The problem exposing properties of native components is covered in detail in this article. In short, export properties with RCT_CUSTOM_VIEW_PROPERTY macro in your custom native component, then use them in React Native as if the component was an ordinary React Native component.
Limits of properties
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks (described here), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
@@ -140,7 +140,7 @@ rootView.appProperties = @{@"images" : imageLis
Layout computation flow
When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.
Layout of a native component embedded in React Native
-This case is covered in this article. Basically, as all our native react views are subclasses of UIView, most style and size attributes will work like you would expect out of the box.
+This case is covered in this article. To summarize, as all our native react views are subclasses of UIView, most style and size attributes will work like you would expect out of the box.
Layout of a React Native component embedded in native
React Native content with fixed size
The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.
@@ -208,7 +208,7 @@ rootView.appProperties = @{@"images" : imageLis
You can checkout full source code of the example here.
It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate rootViewDidChangeIntrinsicSize: method will be called once the content size is known.
-Note: React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
+Note: React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
Note: React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use UIView's hidden property). Then change its visibility in the delegate method.
diff --git a/docs/0.10/communication-ios/index.html b/docs/0.10/communication-ios/index.html
index 08f3584ba89..bd739a82f26 100644
--- a/docs/0.10/communication-ios/index.html
+++ b/docs/0.10/communication-ios/index.html
@@ -71,7 +71,7 @@
EditCommunication between native and React Native
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
Introduction
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
-The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
+The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.
Properties
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
Passing properties from native to React Native
@@ -113,7 +113,7 @@ rootView.appProperties = @{@"images" : imageLis
Note: Currently, JS function componentWillUpdateProps of the top level RN component will not be called after a prop update. However, you can access the new props in componentDidMount function.
Passing properties from React Native to native
-The problem exposing properties of native components is covered in detail in this article. In short, export properties with RCT_CUSTOM_VIEW_PROPERTY macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.
+The problem exposing properties of native components is covered in detail in this article. In short, export properties with RCT_CUSTOM_VIEW_PROPERTY macro in your custom native component, then use them in React Native as if the component was an ordinary React Native component.
Limits of properties
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks (described here), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
@@ -140,7 +140,7 @@ rootView.appProperties = @{@"images" : imageLis
Layout computation flow
When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.
Layout of a native component embedded in React Native
-This case is covered in this article. Basically, as all our native react views are subclasses of UIView, most style and size attributes will work like you would expect out of the box.
+This case is covered in this article. To summarize, as all our native react views are subclasses of UIView, most style and size attributes will work like you would expect out of the box.
Layout of a React Native component embedded in native
React Native content with fixed size
The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.
@@ -208,7 +208,7 @@ rootView.appProperties = @{@"images" : imageLis
You can checkout full source code of the example here.
It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate rootViewDidChangeIntrinsicSize: method will be called once the content size is known.
-Note: React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
+Note: React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
Note: React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use UIView's hidden property). Then change its visibility in the delegate method.
diff --git a/docs/0.10/custom-webview-android.html b/docs/0.10/custom-webview-android.html
index 96f460b2f7e..445957715ae 100644
--- a/docs/0.10/custom-webview-android.html
+++ b/docs/0.10/custom-webview-android.html
@@ -218,7 +218,7 @@
}
}
-Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
+Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
For example, if you wanted to add an internal event handler called onScrollToBottom, you would use,
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
diff --git a/docs/0.10/custom-webview-android/index.html b/docs/0.10/custom-webview-android/index.html
index 96f460b2f7e..445957715ae 100644
--- a/docs/0.10/custom-webview-android/index.html
+++ b/docs/0.10/custom-webview-android/index.html
@@ -218,7 +218,7 @@
}
}
-Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
+Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
For example, if you wanted to add an internal event handler called onScrollToBottom, you would use,
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
diff --git a/docs/0.10/custom-webview-ios.html b/docs/0.10/custom-webview-ios.html
index c53329e586b..5dcf1e1abe2 100644
--- a/docs/0.10/custom-webview-ios.html
+++ b/docs/0.10/custom-webview-ios.html
@@ -189,7 +189,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
}
}
-Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
+Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
For example, if you wanted to add an internal event handler called onScrollToBottom, you would use,
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
diff --git a/docs/0.10/custom-webview-ios/index.html b/docs/0.10/custom-webview-ios/index.html
index c53329e586b..5dcf1e1abe2 100644
--- a/docs/0.10/custom-webview-ios/index.html
+++ b/docs/0.10/custom-webview-ios/index.html
@@ -189,7 +189,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
}
}
-Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
+Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the nativeOnly property of the third argument previously mentioned. For event handlers, you have to use the value true instead of a regular prop type.
For example, if you wanted to add an internal event handler called onScrollToBottom, you would use,
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
diff --git a/docs/0.10/debugging.html b/docs/0.10/debugging.html
index df313d99703..312b8edb673 100644
--- a/docs/0.10/debugging.html
+++ b/docs/0.10/debugging.html
@@ -143,7 +143,7 @@ YellowBox.ig
Integration with React Native Inspector
Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
-However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
+However, when react-devtools is running, Inspector will enter a collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
You can choose "Toggle Inspector" in the same menu to exit this mode.
Inspecting Component Instances
@@ -178,6 +178,7 @@ YellowBox.ig
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
adb reverse tcp:8081 tcp:8081
+
Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
diff --git a/docs/0.10/debugging/index.html b/docs/0.10/debugging/index.html
index df313d99703..312b8edb673 100644
--- a/docs/0.10/debugging/index.html
+++ b/docs/0.10/debugging/index.html
@@ -143,7 +143,7 @@ YellowBox.ig
Integration with React Native Inspector
Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
-However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
+However, when react-devtools is running, Inspector will enter a collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
You can choose "Toggle Inspector" in the same menu to exit this mode.
Inspecting Component Instances
@@ -178,6 +178,7 @@ YellowBox.ig
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
adb reverse tcp:8081 tcp:8081
+
Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
diff --git a/docs/0.10/dimensions.html b/docs/0.10/dimensions.html
index 915a53c724f..d3c06e6cf35 100644
--- a/docs/0.10/dimensions.html
+++ b/docs/0.10/dimensions.html
@@ -80,7 +80,7 @@
static set(dims)
This should only be called from native code.
-@param {object} dims Simple string-keyed object of dimensions to set
+@param {object} dims string-keyed object of dimensions to set
get()
static get(dim)
diff --git a/docs/0.10/dimensions/index.html b/docs/0.10/dimensions/index.html
index 915a53c724f..d3c06e6cf35 100644
--- a/docs/0.10/dimensions/index.html
+++ b/docs/0.10/dimensions/index.html
@@ -80,7 +80,7 @@
static set(dims)
This should only be called from native code.
-@param {object} dims Simple string-keyed object of dimensions to set
+@param {object} dims string-keyed object of dimensions to set
get()
static get(dim)
diff --git a/docs/0.10/drawerlayoutandroid.html b/docs/0.10/drawerlayoutandroid.html
index b70fadf94f8..d07b6394564 100644
--- a/docs/0.10/drawerlayoutandroid.html
+++ b/docs/0.10/drawerlayoutandroid.html
@@ -170,7 +170,7 @@
drawerBackgroundColor
-Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
+Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
</DrawerLayoutAndroid>
diff --git a/docs/0.10/drawerlayoutandroid/index.html b/docs/0.10/drawerlayoutandroid/index.html
index b70fadf94f8..d07b6394564 100644
--- a/docs/0.10/drawerlayoutandroid/index.html
+++ b/docs/0.10/drawerlayoutandroid/index.html
@@ -170,7 +170,7 @@
drawerBackgroundColor
-Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
+Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
</DrawerLayoutAndroid>
diff --git a/docs/0.10/easing.html b/docs/0.10/easing.html
index 503fb437bd5..d3d624c28d5 100644
--- a/docs/0.10/easing.html
+++ b/docs/0.10/easing.html
@@ -17,10 +17,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a simple animation where the object goes slightly back before moving forwardback provides a basic animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a simple inertial animationelastic provides a simple spring interactionease provides a basic inertial animationelastic provides a basic spring interaction
Standard functions
Three standard easing functions are provided:
@@ -86,7 +86,7 @@
ease()
static ease(t)
-A simple inertial interaction, similar to an object slowly accelerating to speed.
+A basic inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -128,14 +128,14 @@
elastic()
static elastic(bounciness)
-A simple elastic interaction, similar to a spring oscillating back and forth.
+A basic elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -144,7 +144,7 @@
bounce()
static bounce(t)
-Provides a simple bouncing effect.
+Provides a basic bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.10/easing/index.html b/docs/0.10/easing/index.html
index 503fb437bd5..d3d624c28d5 100644
--- a/docs/0.10/easing/index.html
+++ b/docs/0.10/easing/index.html
@@ -17,10 +17,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a simple animation where the object goes slightly back before moving forwardback provides a basic animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a simple inertial animationelastic provides a simple spring interactionease provides a basic inertial animationelastic provides a basic spring interaction
Standard functions
Three standard easing functions are provided:
@@ -86,7 +86,7 @@
ease()
static ease(t)
-A simple inertial interaction, similar to an object slowly accelerating to speed.
+A basic inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -128,14 +128,14 @@
elastic()
static elastic(bounciness)
-A simple elastic interaction, similar to a spring oscillating back and forth.
+A basic elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -144,7 +144,7 @@
bounce()
static bounce(t)
-Provides a simple bouncing effect.
+Provides a basic bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.10/flatlist.html b/docs/0.10/flatlist.html
index 4b9a6156714..f380cfb5cf5 100644
--- a/docs/0.10/flatlist.html
+++ b/docs/0.10/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native EditFlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
+ EditFlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
@@ -178,7 +178,7 @@
data
-For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
+For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
Type Required getItemLayout
(data, index) => {length: number, offset: number, index: number}
-getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
+getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient if you have fixed height items, for example:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
diff --git a/docs/0.10/flatlist/index.html b/docs/0.10/flatlist/index.html
index 4b9a6156714..f380cfb5cf5 100644
--- a/docs/0.10/flatlist/index.html
+++ b/docs/0.10/flatlist/index.html
@@ -1,4 +1,4 @@
-FlatList · React Native EditFlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
+ EditFlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
@@ -178,7 +178,7 @@
data
-For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
+For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
Type Required getItemLayout
(data, index) => {length: number, offset: number, index: number}
-getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
+getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient if you have fixed height items, for example:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
diff --git a/docs/0.10/gesture-responder-system.html b/docs/0.10/gesture-responder-system.html
index 3cfc2dd6234..92b203c268e 100644
--- a/docs/0.10/gesture-responder-system.html
+++ b/docs/0.10/gesture-responder-system.html
@@ -78,7 +78,7 @@
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
TouchableHighlight and Touchable*
-The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.
+The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.
Responder Lifecycle
A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:
diff --git a/docs/0.10/gesture-responder-system/index.html b/docs/0.10/gesture-responder-system/index.html
index 3cfc2dd6234..92b203c268e 100644
--- a/docs/0.10/gesture-responder-system/index.html
+++ b/docs/0.10/gesture-responder-system/index.html
@@ -78,7 +78,7 @@
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
TouchableHighlight and Touchable*
-The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.
+The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.
Responder Lifecycle
A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:
diff --git a/docs/0.10/getting-started.html b/docs/0.10/getting-started.html
index 05513573b6a..4a1173d7cf2 100644
--- a/docs/0.10/getting-started.html
+++ b/docs/0.10/getting-started.html
@@ -109,16 +109,16 @@ npm start # you can also use: expo start
If you're curious to learn more about React Native, continue on to the Tutorial.
Running your app on a simulator or virtual device
-Expo CLI makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
+Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).
Caveats
Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
-If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll just need to "eject" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
+If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "eject" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check this document to find out what versions are supported.
If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo, you'll need this section.
-The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different.
+The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.
Development OS:
@@ -327,7 +327,7 @@ npm start # you can also use: expo start
Using a virtual device
If you use Android Studio to open ./AwesomeProject/android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
-If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Pie API Level 28 image.
+If you have recently installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Pie API Level 28 image.
We recommend configuring VM acceleration on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
@@ -350,7 +350,7 @@ react-native run-ios
You should see your new app running in the iOS Simulator shortly.
-react-native run-ios is just one way to run your app. You can also run it directly from within Xcode.
+react-native run-ios is one way to run your app. You can also run it directly from within Xcode.
If you can't get this to work, see the Troubleshooting page.
@@ -368,7 +368,7 @@ react-native run-android
-react-native run-android is just one way to run your app - you can also run it directly from within Android Studio.
+react-native run-android is one way to run your app - you can also run it directly from within Android Studio.
If you can't get this to work, see the Troubleshooting page.
diff --git a/docs/0.10/getting-started/index.html b/docs/0.10/getting-started/index.html
index 05513573b6a..4a1173d7cf2 100644
--- a/docs/0.10/getting-started/index.html
+++ b/docs/0.10/getting-started/index.html
@@ -109,16 +109,16 @@ npm start # you can also use: expo start
If you're curious to learn more about React Native, continue on to the Tutorial.
Running your app on a simulator or virtual device
-Expo CLI makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
+Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).
Caveats
Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
-If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll just need to "eject" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
+If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "eject" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check this document to find out what versions are supported.
If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo, you'll need this section.
-The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different.
+The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.
Development OS:
@@ -327,7 +327,7 @@ npm start # you can also use: expo start
Using a virtual device
If you use Android Studio to open ./AwesomeProject/android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
-If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Pie API Level 28 image.
+If you have recently installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Pie API Level 28 image.
We recommend configuring VM acceleration on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
@@ -350,7 +350,7 @@ react-native run-ios
You should see your new app running in the iOS Simulator shortly.
-react-native run-ios is just one way to run your app. You can also run it directly from within Xcode.
+react-native run-ios is one way to run your app. You can also run it directly from within Xcode.
If you can't get this to work, see the Troubleshooting page.
@@ -368,7 +368,7 @@ react-native run-android
-react-native run-android is just one way to run your app - you can also run it directly from within Android Studio.
+react-native run-android is one way to run your app - you can also run it directly from within Android Studio.
If you can't get this to work, see the Troubleshooting page.
diff --git a/docs/0.10/handling-touches.html b/docs/0.10/handling-touches.html
index b3a94c26144..6c6cea2058c 100644
--- a/docs/0.10/handling-touches.html
+++ b/docs/0.10/handling-touches.html
@@ -78,7 +78,7 @@
title="Press Me"
/>
-This will render a blue label on iOS, and a blue rounded rectangle with white text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.
+This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.
Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.