diff --git a/docs/accessibility.html b/docs/accessibility.html index 02fbf455caf..23fa96a48b7 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -130,7 +130,7 @@

In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.

Checking if a Screen Reader is Enabled

-

The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.

+

The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.

Sending Accessibility Events (Android)

Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.

import { UIManager, findNodeHandle } from 'react-native';
diff --git a/docs/accessibility/index.html b/docs/accessibility/index.html
index 02fbf455caf..23fa96a48b7 100644
--- a/docs/accessibility/index.html
+++ b/docs/accessibility/index.html
@@ -130,7 +130,7 @@

In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.

Checking if a Screen Reader is Enabled

-

The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.

+

The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.

Sending Accessibility Events (Android)

Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.

import { UIManager, findNodeHandle } from 'react-native';
diff --git a/docs/accessibilityinfo.html b/docs/accessibilityinfo.html
index 2773e40e5a1..ea042966ecd 100644
--- a/docs/accessibilityinfo.html
+++ b/docs/accessibilityinfo.html
@@ -75,11 +75,11 @@

Methods

Reference

diff --git a/docs/accessibilityinfo/index.html b/docs/accessibilityinfo/index.html index 2773e40e5a1..ea042966ecd 100644 --- a/docs/accessibilityinfo/index.html +++ b/docs/accessibilityinfo/index.html @@ -75,11 +75,11 @@

Methods

Reference

diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 0c6b4403da3..ac4a0766715 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -31,8 +31,8 @@ });
Edit

ActionSheetIOS

Methods

Reference

@@ -47,7 +47,7 @@
  • destructiveButtonIndex (int) - index of destructive button in options
  • title (string) - a title to show above the action sheet
  • message (string) - a message to show below the title
    • -
  • tintColor (string) - the color used for non-destructive button titles
    • +
  • tintColor (string) - the color used for non-destructive button titles

    • The 'callback' function takes one parameter, the zero-based index of the selected item.

    Minimal example:

    diff --git a/docs/actionsheetios/index.html b/docs/actionsheetios/index.html index 0c6b4403da3..ac4a0766715 100644 --- a/docs/actionsheetios/index.html +++ b/docs/actionsheetios/index.html @@ -31,8 +31,8 @@ });
    Edit

    ActionSheetIOS

    Methods

    Reference

    @@ -47,7 +47,7 @@
  • destructiveButtonIndex (int) - index of destructive button in options
  • title (string) - a title to show above the action sheet
  • message (string) - a message to show below the title
    • -
  • tintColor (string) - the color used for non-destructive button titles
    • +
  • tintColor (string) - the color used for non-destructive button titles

    • The 'callback' function takes one parameter, the zero-based index of the selected item.

    Minimal example:

    diff --git a/docs/activityindicator.html b/docs/activityindicator.html index 71987f7878a..cde02242df1 100644 --- a/docs/activityindicator.html +++ b/docs/activityindicator.html @@ -70,13 +70,13 @@ AppRegistry.registerComponent('App', () => App)

    Props

    Reference

    @@ -99,7 +99,7 @@ AppRegistry.registerComponent('App', () => App) TypeRequired -colorNo +colorNo
    diff --git a/docs/activityindicator/index.html b/docs/activityindicator/index.html index 71987f7878a..cde02242df1 100644 --- a/docs/activityindicator/index.html +++ b/docs/activityindicator/index.html @@ -70,13 +70,13 @@ AppRegistry.registerComponent('App', () => App)

    Props

    Reference

    @@ -99,7 +99,7 @@ AppRegistry.registerComponent('App', () => App) TypeRequired -colorNo +colorNo
    diff --git a/docs/alert.html b/docs/alert.html index 8bc4fdffc6d..28798c49588 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -73,7 +73,7 @@ Alert.alert(

    Methods

    Reference

    diff --git a/docs/alert/index.html b/docs/alert/index.html index 8bc4fdffc6d..28798c49588 100644 --- a/docs/alert/index.html +++ b/docs/alert/index.html @@ -73,7 +73,7 @@ Alert.alert(

    Methods

    Reference

    diff --git a/docs/alertios.html b/docs/alertios.html index 764e4abb59d..55276240cba 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -43,17 +43,17 @@ text => console.log("You entered "+text) ); -

    We recommend using the Alert.alert method for cross-platform support if you don't need to create iOS-only prompts.

    +

    We recommend using the Alert.alert method for cross-platform support if you don't need to create iOS-only prompts.

    Methods

    Type Definitions

    Reference

    @@ -70,8 +70,8 @@ titlestringYesThe dialog's title. Passing null or '' will hide the title. messagestringNoAn optional message that appears below the dialog's title. -callbackOrButtons?(() => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys. style should be one of 'default', 'cancel' or 'destructive'. -typeAlertTypeNoDeprecated, do not use. +callbackOrButtons?(() => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys. style should be one of 'default', 'cancel' or 'destructive'. +typeAlertTypeNoDeprecated, do not use.

    Example with custom buttons:

    @@ -104,8 +104,8 @@ titlestringYesThe dialog's title. messagestringNoAn optional message that appears above the text input. -callbackOrButtons?((text: string) => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys (see example). style should be one of 'default', 'cancel' or 'destructive'. -typeAlertTypeNoThis configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. +callbackOrButtons?((text: string) => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys (see example). style should be one of 'default', 'cancel' or 'destructive'. +typeAlertTypeNoThis configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. defaultValuestringNoThe default text in text input. keyboardTypestringNoThe keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'. @@ -202,7 +202,7 @@ [text]stringButton label [onPress]functionCallback function when button pressed -[style]AlertButtonStyleButton style +[style]AlertButtonStyleButton style

    Constants:

    diff --git a/docs/alertios/index.html b/docs/alertios/index.html index 764e4abb59d..55276240cba 100644 --- a/docs/alertios/index.html +++ b/docs/alertios/index.html @@ -43,17 +43,17 @@ text => console.log("You entered "+text) ); -

    We recommend using the Alert.alert method for cross-platform support if you don't need to create iOS-only prompts.

    +

    We recommend using the Alert.alert method for cross-platform support if you don't need to create iOS-only prompts.

    Methods

    Type Definitions

    Reference

    @@ -70,8 +70,8 @@ titlestringYesThe dialog's title. Passing null or '' will hide the title. messagestringNoAn optional message that appears below the dialog's title. -callbackOrButtons?(() => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys. style should be one of 'default', 'cancel' or 'destructive'. -typeAlertTypeNoDeprecated, do not use. +callbackOrButtons?(() => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys. style should be one of 'default', 'cancel' or 'destructive'. +typeAlertTypeNoDeprecated, do not use.

    Example with custom buttons:

    @@ -104,8 +104,8 @@ titlestringYesThe dialog's title. messagestringNoAn optional message that appears above the text input. -callbackOrButtons?((text: string) => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys (see example). style should be one of 'default', 'cancel' or 'destructive'. -typeAlertTypeNoThis configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. +callbackOrButtons?((text: string) => void),ButtonsArrayNoThis optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys (see example). style should be one of 'default', 'cancel' or 'destructive'. +typeAlertTypeNoThis configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. defaultValuestringNoThe default text in text input. keyboardTypestringNoThe keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'. @@ -202,7 +202,7 @@ [text]stringButton label [onPress]functionCallback function when button pressed -[style]AlertButtonStyleButton style +[style]AlertButtonStyleButton style

    Constants:

    diff --git a/docs/animated.html b/docs/animated.html index 6a93981dfc0..5ed18bf81c3 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -39,31 +39,31 @@ } ).start(); // Start the animation -

    Refer to the Animations guide to see additional examples of Animated in action.

    +

    Refer to the Animations guide to see additional examples of Animated in action.

    Overview

    There are two value types you can use with Animated:

    Animated.Value can bind to style properties or other props, and can be interpolated as well. A single Animated.Value can drive any number of properties.

    Configuring animations

    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:

    In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.

    Working with animations

    Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.

    Using the native driver

    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.

    +

    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.

    Animated exports the following animatable components using the above wrapper:

      @@ -75,32 +75,32 @@

      Composing animations

      Animations can also be combined in complex ways using composition functions:

      -

      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 simply 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, subtraction, multiplication, division, or modulo to make a new animated value:

      Interpolation

      The interpolate() function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses lineal interpolation by default but also supports easing functions.

      -

      Read more about interpolation in the Animation guide.

      +

      Read more about interpolation in the Animation guide.

      Handling gestures and other events

      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):

       onScroll={Animated.event(
@@ -115,32 +115,32 @@

      Methods

      Properties

      Reference

      @@ -161,7 +161,7 @@

      timing()

      static timing(value, config)
      -

      Animates a value along a timed easing curve. The Easing module has tons of predefined curves, or you can use your own function.

      +

      Animates a value along a timed easing curve. The Easing module has tons of predefined curves, or you can use your own function.

      Config is an object that may have the following options:

      • duration: Length of animation (milliseconds). Default 500.
        • diff --git a/docs/animated/index.html b/docs/animated/index.html index 6a93981dfc0..5ed18bf81c3 100644 --- a/docs/animated/index.html +++ b/docs/animated/index.html @@ -39,31 +39,31 @@ } ).start(); // Start the animation -

        Refer to the Animations guide to see additional examples of Animated in action.

        +

        Refer to the Animations guide to see additional examples of Animated in action.

        Overview

        There are two value types you can use with Animated:

        Animated.Value can bind to style properties or other props, and can be interpolated as well. A single Animated.Value can drive any number of properties.

        Configuring animations

        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:

        In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.

        Working with animations

        Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.

        Using the native driver

        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.

        +

        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.

        Animated exports the following animatable components using the above wrapper:

          @@ -75,32 +75,32 @@

          Composing animations

          Animations can also be combined in complex ways using composition functions:

          -

          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 simply 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, subtraction, multiplication, division, or modulo to make a new animated value:

          Interpolation

          The interpolate() function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses lineal interpolation by default but also supports easing functions.

          -

          Read more about interpolation in the Animation guide.

          +

          Read more about interpolation in the Animation guide.

          Handling gestures and other events

          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):

           onScroll={Animated.event(
@@ -115,32 +115,32 @@

          Methods

          Properties

          Reference

          @@ -161,7 +161,7 @@

          timing()

          static timing(value, config)
          -

          Animates a value along a timed easing curve. The Easing module has tons of predefined curves, or you can use your own function.

          +

          Animates a value along a timed easing curve. The Easing module has tons of predefined curves, or you can use your own function.

          Config is an object that may have the following options:

          • duration: Length of animation (milliseconds). Default 500.
            • diff --git a/docs/animatedvalue.html b/docs/animatedvalue.html index ddab537c6a3..7d20b2f55da 100644 --- a/docs/animatedvalue.html +++ b/docs/animatedvalue.html @@ -8,22 +8,22 @@ ga('send', 'pageview');

            0.56

            Edit

            AnimatedValue

            Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones.

            Typically initialized with new Animated.Value(0);

            -

            See also Animated.

            +

            See also Animated.

            Methods

            Reference

            diff --git a/docs/animatedvalue/index.html b/docs/animatedvalue/index.html index ddab537c6a3..7d20b2f55da 100644 --- a/docs/animatedvalue/index.html +++ b/docs/animatedvalue/index.html @@ -8,22 +8,22 @@ ga('send', 'pageview');

            0.56

            Edit

            AnimatedValue

            Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones.

            Typically initialized with new Animated.Value(0);

            -

            See also Animated.

            +

            See also Animated.

            Methods

            Reference

            diff --git a/docs/animatedvaluexy.html b/docs/animatedvaluexy.html index 6f50a2e61f1..f3f152fb57f 100644 --- a/docs/animatedvaluexy.html +++ b/docs/animatedvaluexy.html @@ -1,4 +1,4 @@ -AnimatedValueXY · React Native

            0.56

            Edit

            AnimatedValueXY

            2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood.

            -

            See also Animated.

            +

            0.56

            Edit

            AnimatedValueXY

            2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood.

            +

            See also Animated.

            Example

            class DraggableView extends React.Component {
   constructor(props) {
@@ -45,17 +45,17 @@

            Methods

            Reference

            diff --git a/docs/animatedvaluexy/index.html b/docs/animatedvaluexy/index.html index 6f50a2e61f1..f3f152fb57f 100644 --- a/docs/animatedvaluexy/index.html +++ b/docs/animatedvaluexy/index.html @@ -1,4 +1,4 @@ -AnimatedValueXY · React Native

            0.56

            Edit

            AnimatedValueXY

            2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood.

            -

            See also Animated.

            +

            0.56

            Edit

            AnimatedValueXY

            2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood.

            +

            See also Animated.

            Example

            class DraggableView extends React.Component {
   constructor(props) {
@@ -45,17 +45,17 @@

            Methods

            Reference

            diff --git a/docs/animations.html b/docs/animations.html index 8319d338215..2a36c6a950f 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -30,9 +30,9 @@ } });
            Edit

            Animations

            Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

            -

            React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

            +

            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 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.

            Animated exports four animatable component types: View, Text, Image, and ScrollView, 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:

            ← ImagesAccessibility →
            Edit

            Animations

            Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

            -

            React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

            +

            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 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.

            Animated exports four animatable component types: View, Text, Image, and ScrollView, 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:

            ← ImagesAccessibility →
            Edit

            BackAndroid

            Deprecated. Use BackHandler instead.

            Methods

            Reference

            diff --git a/docs/backandroid/index.html b/docs/backandroid/index.html index c03c8d6f6d3..cf25e331e69 100644 --- a/docs/backandroid/index.html +++ b/docs/backandroid/index.html @@ -32,9 +32,9 @@
            Edit

            BackAndroid

            Deprecated. Use BackHandler instead.

            Methods

            Reference

            diff --git a/docs/backhandler.html b/docs/backhandler.html index 50d366b2915..2a9aec9a6bb 100644 --- a/docs/backhandler.html +++ b/docs/backhandler.html @@ -74,9 +74,9 @@

            Methods

            Reference

            diff --git a/docs/backhandler/index.html b/docs/backhandler/index.html index 50d366b2915..2a9aec9a6bb 100644 --- a/docs/backhandler/index.html +++ b/docs/backhandler/index.html @@ -74,9 +74,9 @@

            Methods

            Reference

            diff --git a/docs/building-from-source.html b/docs/building-from-source.html index 3fbbba4ac59..5d117e9f9ea 100644 --- a/docs/building-from-source.html +++ b/docs/building-from-source.html @@ -131,7 +131,7 @@ ndk.dir=/Users/your_unix_name/android-ndk/an

            Troubleshooting

            Gradle build fails in ndk-build. See the section about local.properties file above.

            Testing your Changes

            -

            If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see Testing your Changes.

            +

            If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see Testing your Changes.

            ← What to Expect from MaintainersTesting your Changes →
            Edit

            Button

            A basic button component that should render nicely on any platform. Supports a minimal level of customization.

            -

            If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

            +

            If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

            Example usage:

            import { Button } from 'react-native';
 ...
@@ -45,13 +45,13 @@

            Props

            Reference

            @@ -96,7 +96,7 @@ TypeRequired -colorNo +colorNo
            diff --git a/docs/button/index.html b/docs/button/index.html index c3d2921d7ac..5f9ed713f7c 100644 --- a/docs/button/index.html +++ b/docs/button/index.html @@ -31,7 +31,7 @@ });
            Edit

            Button

            A basic button component that should render nicely on any platform. Supports a minimal level of customization.

            -

            If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

            +

            If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

            Example usage:

            import { Button } from 'react-native';
 ...
@@ -45,13 +45,13 @@

            Props

            Reference

            @@ -96,7 +96,7 @@ TypeRequired -colorNo +colorNo
            diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 2f611bdc0a6..09eed0ae6de 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -30,14 +30,14 @@ } });
            Edit

            CameraRoll

            CameraRoll provides access to the local camera roll or photo library.

            -

            On iOS, the CameraRoll API requires the RCTCameraRoll library to be linked. You can refer to Linking Libraries (iOS) to learn more.

            +

            On iOS, the CameraRoll API requires the RCTCameraRoll library to be linked. You can refer to Linking Libraries (iOS) to learn more.

            Permissions

            The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description in Xcode.

            If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescription key in your Info.plist. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

            Methods

            Reference

            diff --git a/docs/cameraroll/index.html b/docs/cameraroll/index.html index 2f611bdc0a6..09eed0ae6de 100644 --- a/docs/cameraroll/index.html +++ b/docs/cameraroll/index.html @@ -30,14 +30,14 @@ } });
            Edit

            CameraRoll

            CameraRoll provides access to the local camera roll or photo library.

            -

            On iOS, the CameraRoll API requires the RCTCameraRoll library to be linked. You can refer to Linking Libraries (iOS) to learn more.

            +

            On iOS, the CameraRoll API requires the RCTCameraRoll library to be linked. You can refer to Linking Libraries (iOS) to learn more.

            Permissions

            The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description in Xcode.

            If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescription key in your Info.plist. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

            Methods

            Reference

            diff --git a/docs/checkbox.html b/docs/checkbox.html index fe79fe49a14..61d944ea063 100644 --- a/docs/checkbox.html +++ b/docs/checkbox.html @@ -11,14 +11,14 @@

            @keyword checkbox @keyword toggle

            Props

            Reference

            diff --git a/docs/checkbox/index.html b/docs/checkbox/index.html index fe79fe49a14..61d944ea063 100644 --- a/docs/checkbox/index.html +++ b/docs/checkbox/index.html @@ -11,14 +11,14 @@

            @keyword checkbox @keyword toggle

            Props

            Reference

            diff --git a/docs/clipboard.html b/docs/clipboard.html index 25bdd3b55c5..f9f97529da8 100644 --- a/docs/clipboard.html +++ b/docs/clipboard.html @@ -32,8 +32,8 @@
            Edit

            Clipboard

            Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android

            Methods

            Reference

            diff --git a/docs/clipboard/index.html b/docs/clipboard/index.html index 25bdd3b55c5..f9f97529da8 100644 --- a/docs/clipboard/index.html +++ b/docs/clipboard/index.html @@ -32,8 +32,8 @@
            Edit

            Clipboard

            Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android

            Methods

            Reference

            diff --git a/docs/colors.html b/docs/colors.html index 264350ef63c..61cd943a321 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Color Reference · React Native
            Edit

            Color Reference

            Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

            +
            Edit

            Color Reference

            Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

            Red-green-blue

            React Native supports rgb() and rgba() in both hexadecimal and functional notation:

              diff --git a/docs/colors/index.html b/docs/colors/index.html index 264350ef63c..61cd943a321 100644 --- a/docs/colors/index.html +++ b/docs/colors/index.html @@ -1,4 +1,4 @@ -Color Reference · React Native
            Edit

            Color Reference

            Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

            +
            Edit

            Color Reference

            Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

            Red-green-blue

            React Native supports rgb() and rgba() in both hexadecimal and functional notation:

              diff --git a/docs/communication-android.html b/docs/communication-android.html index 945f518f2e2..04696f7944d 100644 --- a/docs/communication-android.html +++ b/docs/communication-android.html @@ -1,4 +1,4 @@ -Communication between native and React Native · React Native

              0.56

              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              +

              0.56

              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              Introduction

              React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.

              The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.

              @@ -72,15 +72,15 @@ 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 just 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.

              +

              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.

              Other ways of cross-language interaction (events and native modules)

              As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).

              React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.

              Calling React Native functions from native (events)

              -

              Events are described in detail in this article. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.

              +

              Events are described in detail in this article. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.

              Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:

              • As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
                • @@ -88,7 +88,7 @@ mReactRootView.setAppProperties(updatedProps);
              • If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's reactTag as an identifier).

              Calling native functions from React Native (native modules)

              -

              Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in this article.

              +

              Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in this article.

              Warning: All native modules share the same namespace. Watch out for name collisions when creating new ones.

              diff --git a/docs/communication-android/index.html b/docs/communication-android/index.html index 945f518f2e2..04696f7944d 100644 --- a/docs/communication-android/index.html +++ b/docs/communication-android/index.html @@ -1,4 +1,4 @@ -Communication between native and React Native · React Native

              0.56

              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              +

              0.56

              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              Introduction

              React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.

              The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.

              @@ -72,15 +72,15 @@ 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 just 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.

              +

              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.

              Other ways of cross-language interaction (events and native modules)

              As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).

              React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.

              Calling React Native functions from native (events)

              -

              Events are described in detail in this article. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.

              +

              Events are described in detail in this article. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.

              Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:

              • As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
                • @@ -88,7 +88,7 @@ mReactRootView.setAppProperties(updatedProps);
              • If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's reactTag as an identifier).

              Calling native functions from React Native (native modules)

              -

              Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in this article.

              +

              Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in this article.

              Warning: All native modules share the same namespace. Watch out for name collisions when creating new ones.

              diff --git a/docs/communication-ios.html b/docs/communication-ios.html index 76edb7cf04d..399590b06aa 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -Communication between native and React Native · React Native
              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              +
              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              Introduction

              React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.

              The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.

              @@ -83,15 +83,15 @@ rootView.appProperties = @{
              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              +
              Edit

              Communication between native and React Native

              In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

              Introduction

              React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.

              The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.

              @@ -83,15 +83,15 @@ rootView.appProperties = @{
              Edit

              Components and APIs

              React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:

              You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning react-native, or check out Awesome React Native for a curated list.

              Basic Components

              diff --git a/docs/components-and-apis/index.html b/docs/components-and-apis/index.html index 6c8092d0783..79ca359a249 100644 --- a/docs/components-and-apis/index.html +++ b/docs/components-and-apis/index.html @@ -31,12 +31,12 @@ });
              Edit

              Components and APIs

              React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:

              You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning react-native, or check out Awesome React Native for a curated list.

              Basic Components

              diff --git a/docs/custom-webview-android.html b/docs/custom-webview-android.html index e488944cd29..c83d43fcadb 100644 --- a/docs/custom-webview-android.html +++ b/docs/custom-webview-android.html @@ -44,7 +44,7 @@ } } -

              You'll need to follow the usual steps to register the module.

              +

              You'll need to follow the usual steps to register the module.

              Adding New Properties

              To add a new property, you'll need to add it to CustomWebView, and then expose it in CustomWebViewManager.

              public class CustomWebViewManager extends ReactWebViewManager {
diff --git a/docs/custom-webview-android/index.html b/docs/custom-webview-android/index.html
index e488944cd29..c83d43fcadb 100644
--- a/docs/custom-webview-android/index.html
+++ b/docs/custom-webview-android/index.html
@@ -44,7 +44,7 @@
   }
 }
              -

              You'll need to follow the usual steps to register the module.

              +

              You'll need to follow the usual steps to register the module.

              Adding New Properties

              To add a new property, you'll need to add it to CustomWebView, and then expose it in CustomWebViewManager.

              public class CustomWebViewManager extends ReactWebViewManager {
diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html
index 1831eed2522..d076fbf70f2 100644
--- a/docs/datepickerandroid.html
+++ b/docs/datepickerandroid.html
@@ -46,9 +46,9 @@

              Methods

              Reference

              diff --git a/docs/datepickerandroid/index.html b/docs/datepickerandroid/index.html index 1831eed2522..d076fbf70f2 100644 --- a/docs/datepickerandroid/index.html +++ b/docs/datepickerandroid/index.html @@ -46,9 +46,9 @@

              Methods

              Reference

              diff --git a/docs/datepickerios.html b/docs/datepickerios.html index f77307e8733..dbe27571625 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -72,17 +72,17 @@ const styles = StyleSheet.create({

              Props

              Reference

              @@ -135,7 +135,7 @@ const styles = StyleSheet.create({ DateNo -

              See maximumDate for an example image.

              +

              See maximumDate for an example image.

              minuteInterval

              The interval at which minutes can be selected.

              diff --git a/docs/datepickerios/index.html b/docs/datepickerios/index.html index f77307e8733..dbe27571625 100644 --- a/docs/datepickerios/index.html +++ b/docs/datepickerios/index.html @@ -72,17 +72,17 @@ const styles = StyleSheet.create({

              Props

              Reference

              @@ -135,7 +135,7 @@ const styles = StyleSheet.create({ DateNo -

              See maximumDate for an example image.

              +

              See maximumDate for an example image.

              minuteInterval

              The interval at which minutes can be selected.

              diff --git a/docs/debugging.html b/docs/debugging.html index 51bae50fb75..f5b8c41404c 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -69,7 +69,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);

              To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.

              Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (⌘⌥I on macOS, Ctrl Shift I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.

              -

              Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.

              +

              Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.

              Debugging using a custom JavaScript debugger

              To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.

              diff --git a/docs/debugging/index.html b/docs/debugging/index.html index 51bae50fb75..f5b8c41404c 100644 --- a/docs/debugging/index.html +++ b/docs/debugging/index.html @@ -69,7 +69,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);

              To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.

              Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (⌘⌥I on macOS, Ctrl Shift I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.

              -

              Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.

              +

              Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.

              Debugging using a custom JavaScript debugger

              To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.

              diff --git a/docs/dimensions.html b/docs/dimensions.html index 12a043ab0cb..50557c04b2d 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -31,10 +31,10 @@ });
              Edit

              Dimensions

              Methods

              Reference

              diff --git a/docs/dimensions/index.html b/docs/dimensions/index.html index 12a043ab0cb..50557c04b2d 100644 --- a/docs/dimensions/index.html +++ b/docs/dimensions/index.html @@ -31,10 +31,10 @@ });
              Edit

              Dimensions

              You can now use MyButton inside of TouchableOpacity! A sidenote for clarity: we used the ref callback syntax here, rather than the traditional string-based ref.

              -

              You may have noticed that we passed all of the props down to the child view using {...this.props}. The reason for this is that TouchableOpacity is actually a composite component, and so in addition to depending on setNativeProps on its child, it also requires that the child perform touch handling. To do this, it passes on various props that call back to the TouchableOpacity component. TouchableHighlight, in contrast, is backed by a native view and only requires that we implement setNativeProps.

              +

              You may have noticed that we passed all of the props down to the child view using {...this.props}. The reason for this is that TouchableOpacity is actually a composite component, and so in addition to depending on setNativeProps on its child, it also requires that the child perform touch handling. To do this, it passes on various props that call back to the TouchableOpacity component. TouchableHighlight, in contrast, is backed by a native view and only requires that we implement setNativeProps.

              setNativeProps to clear TextInput value

              Another very common use case of setNativeProps is to clear the value of a TextInput. The controlled prop of TextInput can sometimes drop characters when the bufferDelay is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use setNativeProps to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button:

            -

            Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the onLayout prop instead.

            +

            Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the onLayout prop instead.

            measureInWindow(callback)

            Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:

              diff --git a/docs/direct-manipulation/index.html b/docs/direct-manipulation/index.html index 59ecc0cc6ea..db50b2dc263 100644 --- a/docs/direct-manipulation/index.html +++ b/docs/direct-manipulation/index.html @@ -153,7 +153,7 @@ render() { width: 880px; " >

            You can now use MyButton inside of TouchableOpacity! A sidenote for clarity: we used the ref callback syntax here, rather than the traditional string-based ref.

            -

            You may have noticed that we passed all of the props down to the child view using {...this.props}. The reason for this is that TouchableOpacity is actually a composite component, and so in addition to depending on setNativeProps on its child, it also requires that the child perform touch handling. To do this, it passes on various props that call back to the TouchableOpacity component. TouchableHighlight, in contrast, is backed by a native view and only requires that we implement setNativeProps.

            +

            You may have noticed that we passed all of the props down to the child view using {...this.props}. The reason for this is that TouchableOpacity is actually a composite component, and so in addition to depending on setNativeProps on its child, it also requires that the child perform touch handling. To do this, it passes on various props that call back to the TouchableOpacity component. TouchableHighlight, in contrast, is backed by a native view and only requires that we implement setNativeProps.

            setNativeProps to clear TextInput value

            Another very common use case of setNativeProps is to clear the value of a TextInput. The controlled prop of TextInput can sometimes drop characters when the bufferDelay is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use setNativeProps to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button:

          -

          Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the onLayout prop instead.

          +

          Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the onLayout prop instead.

          measureInWindow(callback)

          Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:

    Edit

    Easing

    The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

    +
    Edit

    Easing

    The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

    You can find a visualization of some common easing functions at http://easings.net/

    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 forward
      • -
    • bounce provides a bouncing animation
      • -
    • ease provides a simple inertial animation
      • -
    • elastic provides a simple spring interaction
      • +
    • back provides a simple animation where the object goes slightly back before moving forward
      • +
    • bounce provides a bouncing animation
      • +
    • ease provides a simple inertial animation
      • +
    • elastic provides a simple spring interaction

    Standard functions

    Three standard easing functions are provided:

    -

    The poly function can be used to implement quartic, quintic, and other higher power functions.

    +

    The poly function can be used to implement quartic, quintic, and other higher power functions.

    Additional functions

    Additional mathematical functions are provided by the following methods:

      -
    • bezier provides a cubic bezier curve
      • -
    • circle provides a circular function
      • -
    • sin provides a sinusoidal function
      • -
    • exp provides an exponential function
      • +
    • bezier provides a cubic bezier curve
      • +
    • circle provides a circular function
      • +
    • sin provides a sinusoidal function
      • +
    • exp provides an exponential function

    The following helpers are used to modify other easing functions.

      -
    • in runs an easing function forwards
      • -
    • inOut makes any easing function symmetrical
      • -
    • out runs an easing function backwards
      • +
    • in runs an easing function forwards
      • +
    • inOut makes any easing function symmetrical
      • +
    • out runs an easing function backwards

    Methods

    Reference

    diff --git a/docs/easing/index.html b/docs/easing/index.html index 48be046c1bc..4d86815282d 100644 --- a/docs/easing/index.html +++ b/docs/easing/index.html @@ -1,4 +1,4 @@ -Easing · React Native
    Edit

    Easing

    The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

    +
    Edit

    Easing

    The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

    You can find a visualization of some common easing functions at http://easings.net/

    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 forward
      • -
    • bounce provides a bouncing animation
      • -
    • ease provides a simple inertial animation
      • -
    • elastic provides a simple spring interaction
      • +
    • back provides a simple animation where the object goes slightly back before moving forward
      • +
    • bounce provides a bouncing animation
      • +
    • ease provides a simple inertial animation
      • +
    • elastic provides a simple spring interaction

    Standard functions

    Three standard easing functions are provided:

    -

    The poly function can be used to implement quartic, quintic, and other higher power functions.

    +

    The poly function can be used to implement quartic, quintic, and other higher power functions.

    Additional functions

    Additional mathematical functions are provided by the following methods:

      -
    • bezier provides a cubic bezier curve
      • -
    • circle provides a circular function
      • -
    • sin provides a sinusoidal function
      • -
    • exp provides an exponential function
      • +
    • bezier provides a cubic bezier curve
      • +
    • circle provides a circular function
      • +
    • sin provides a sinusoidal function
      • +
    • exp provides an exponential function

    The following helpers are used to modify other easing functions.

      -
    • in runs an easing function forwards
      • -
    • inOut makes any easing function symmetrical
      • -
    • out runs an easing function backwards
      • +
    • in runs an easing function forwards
      • +
    • inOut makes any easing function symmetrical
      • +
    • out runs an easing function backwards

    Methods

    Reference

    diff --git a/docs/flatlist.html b/docs/flatlist.html index 5ab9f4c5e12..b4b2300c383 100644 --- a/docs/flatlist.html +++ b/docs/flatlist.html @@ -41,7 +41,7 @@
  • Scroll loading.
  • ScrollToIndex support.
    • -

    If you need section support, use <SectionList>.

    +

    If you need section support, use <SectionList>.

    Minimal Example:

    <FlatList
   data={[{key: 'a'}, {key: 'b'}]}
@@ -109,52 +109,52 @@ class MultiSelectList extends React.PureComponent {
   }
 }
    -

    This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>) that aren't explicitly listed here, along with the following caveats:

    +

    This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>) that aren't explicitly listed here, along with the following caveats:

    • Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
    • This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
    • In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
    • By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop.
    -

    Also inherits ScrollView Props, unless it is nested in another FlatList of same orientation.

    +

    Also inherits ScrollView Props, unless it is nested in another FlatList of same orientation.

    Props

    Methods

    Reference

    @@ -192,7 +192,7 @@ class MultiSelectList extends React.PureComponent {

    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 just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.

    diff --git a/docs/flatlist/index.html b/docs/flatlist/index.html index 5ab9f4c5e12..b4b2300c383 100644 --- a/docs/flatlist/index.html +++ b/docs/flatlist/index.html @@ -41,7 +41,7 @@
  • Scroll loading.
  • ScrollToIndex support.
    • -

    If you need section support, use <SectionList>.

    +

    If you need section support, use <SectionList>.

    Minimal Example:

    <FlatList
   data={[{key: 'a'}, {key: 'b'}]}
@@ -109,52 +109,52 @@ class MultiSelectList extends React.PureComponent {
   }
 }
    -

    This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>) that aren't explicitly listed here, along with the following caveats:

    +

    This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>) that aren't explicitly listed here, along with the following caveats:

    • Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
    • This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
    • In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
    • By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop.
    -

    Also inherits ScrollView Props, unless it is nested in another FlatList of same orientation.

    +

    Also inherits ScrollView Props, unless it is nested in another FlatList of same orientation.

    Props

    Methods

    Reference

    @@ -192,7 +192,7 @@ class MultiSelectList extends React.PureComponent {

    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 just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.

    TypeRequired
    diff --git a/docs/flexbox.html b/docs/flexbox.html index 2921aa33dd2..7d62cf7e231 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -116,8 +116,8 @@ AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

    Going Deeper

    -

    We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.

    -

    We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to learn how to handle text input with the TextInput component.

    +

    We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.

    +

    We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to learn how to handle text input with the TextInput component.

    ← Height and WidthHandling Text Input →
    Edit

    Handling Text Input

    TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

    +
    Edit

    Handling Text Input

    TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

    For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".

    import React, { Component } from 'react';
 import { AppRegistry, Text, TextInput, View } from 'react-native';
@@ -61,8 +61,8 @@ AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

    In this example, we store text in the state, because it changes over time.

    -

    There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the React docs on controlled components, or the reference docs for TextInput.

    -

    Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and learn how to handle touches.

    +

    There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the React docs on controlled components, or the reference docs for TextInput.

    +

    Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and learn how to handle touches.

    ← Layout with FlexboxHandling Touches →
    Edit

    Handling Text Input

    TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

    +
    Edit

    Handling Text Input

    TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

    For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".

    import React, { Component } from 'react';
 import { AppRegistry, Text, TextInput, View } from 'react-native';
@@ -61,8 +61,8 @@ AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

    In this example, we store text in the state, because it changes over time.

    -

    There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the React docs on controlled components, or the reference docs for TextInput.

    -

    Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and learn how to handle touches.

    +

    There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the React docs on controlled components, or the reference docs for TextInput.

    +

    Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and learn how to handle touches.

    ← Layout with FlexboxHandling Touches →
    Edit

    Handling Touches

    Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

    +
    Edit

    Handling Touches

    Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

    Displaying a basic button

    -

    Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:

    +

    Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:

    <Button
   onPress={() => {
     Alert.alert('You tapped the button!');
@@ -118,10 +118,10 @@ AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);
 
    If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
    
 
    Which "Touchable" component you use will depend on what kind of feedback you want to provide:
    
 
      
-
    • Generally, you can use TouchableHighlight anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
      • 
-
    • You may consider using TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user's touch.
      • 
-
    • TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
      • 
-
    • If you need to handle a tap gesture but you don't want any feedback to be displayed, use TouchableWithoutFeedback.
      • 
+
    • Generally, you can use TouchableHighlight anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
      • 
+
    • You may consider using TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user's touch.
      • 
+
    • TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
      • 
+
    • If you need to handle a tap gesture but you don't want any feedback to be displayed, use TouchableWithoutFeedback.
      • 
 
    
 
    In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the onLongPress props of any of the "Touchable" components.
    
 
    Let's see all of these in action:
    
@@ -210,7 +210,7 @@ AppRegistry.registerComponent('AwesomeProject',
           width: 880px;
         "
       >

    Scrolling lists, swiping pages, and pinch-to-zoom

    -

    Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn how to use a ScrollView next.

    +

    Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn how to use a ScrollView next.

    ← Handling Text InputUsing a ScrollView →
    Edit

    Handling Touches

    Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

    +
    Edit

    Handling Touches

    Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

    Displaying a basic button

    -

    Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:

    +

    Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:

    <Button
   onPress={() => {
     Alert.alert('You tapped the button!');
@@ -118,10 +118,10 @@ AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);
 
    If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
    
 
    Which "Touchable" component you use will depend on what kind of feedback you want to provide:
    
 
      
-
    • Generally, you can use TouchableHighlight anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
      • 
-
    • You may consider using TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user's touch.
      • 
-
    • TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
      • 
-
    • If you need to handle a tap gesture but you don't want any feedback to be displayed, use TouchableWithoutFeedback.
      • 
+
    • Generally, you can use TouchableHighlight anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
      • 
+
    • You may consider using TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user's touch.
      • 
+
    • TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
      • 
+
    • If you need to handle a tap gesture but you don't want any feedback to be displayed, use TouchableWithoutFeedback.
      • 
 
    
 
    In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the onLongPress props of any of the "Touchable" components.
    
 
    Let's see all of these in action:
    
@@ -210,7 +210,7 @@ AppRegistry.registerComponent('AwesomeProject',
           width: 880px;
         "
       >

    Scrolling lists, swiping pages, and pinch-to-zoom

    -

    Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn how to use a ScrollView next.

    +

    Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn how to use a ScrollView next.

    ← Handling Text InputUsing a ScrollView →
    Edit

    Image Style Props

    - +
    TypeRequired
    TypeRequired
    colorNo
    colorNo
    @@ -125,7 +125,7 @@ TypeRequired -colorNo +colorNo
    @@ -176,7 +176,7 @@ TypeRequired -colorNo +colorNo
    diff --git a/docs/image-style-props/index.html b/docs/image-style-props/index.html index f085502b4c9..997a0e91ca0 100644 --- a/docs/image-style-props/index.html +++ b/docs/image-style-props/index.html @@ -31,20 +31,20 @@ });
    Edit

    Image Style Props

    Props

    Reference

    @@ -95,7 +95,7 @@ TypeRequired -colorNo +colorNo
    @@ -125,7 +125,7 @@ TypeRequired -colorNo +colorNo
    @@ -176,7 +176,7 @@ TypeRequired -colorNo +colorNo
    diff --git a/docs/image.html b/docs/image.html index 37b49c64d11..c7c3a8de19f 100644 --- a/docs/image.html +++ b/docs/image.html @@ -112,33 +112,33 @@ AppRegistry.registerComponent(

    Props

    Methods

    Reference

    @@ -154,22 +154,22 @@ AppRegistry.registerComponent(
    Edit

    ImageEditor

    Methods

    Reference

    diff --git a/docs/imageeditor/index.html b/docs/imageeditor/index.html index 4a4d4219276..1dc71922dbd 100644 --- a/docs/imageeditor/index.html +++ b/docs/imageeditor/index.html @@ -31,7 +31,7 @@ });
    Edit

    ImageEditor

    Methods

    Reference

    diff --git a/docs/imagepickerios.html b/docs/imagepickerios.html index 0aafcb58f7d..d4e6a7aaa18 100644 --- a/docs/imagepickerios.html +++ b/docs/imagepickerios.html @@ -31,10 +31,10 @@ });
    Edit

    ImagePickerIOS

    Methods

    Reference

    diff --git a/docs/imagepickerios/index.html b/docs/imagepickerios/index.html index 0aafcb58f7d..d4e6a7aaa18 100644 --- a/docs/imagepickerios/index.html +++ b/docs/imagepickerios/index.html @@ -31,10 +31,10 @@ });
    Edit

    ImagePickerIOS

    Methods

    Reference

    diff --git a/docs/images.html b/docs/images.html index 1bdbdf758e6..f20fc6da7e8 100644 --- a/docs/images.html +++ b/docs/images.html @@ -85,7 +85,7 @@ var icon = this.props.active

    These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

    Network Images

    -

    Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

    +

    Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

    // GOOD
 <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
        style={{width: 400, height: 400}} />
@@ -142,7 +142,7 @@ var icon = this.props.active
 />

    Local Filesystem Images

    -

    See CameraRoll for an example of using local resources that are outside of Images.xcassets.

    +

    See CameraRoll for an example of using local resources that are outside of Images.xcassets.

    Best Camera Roll Image

    iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.

    Why Not Automatically Size Everything?

    diff --git a/docs/images/index.html b/docs/images/index.html index 1bdbdf758e6..f20fc6da7e8 100644 --- a/docs/images/index.html +++ b/docs/images/index.html @@ -85,7 +85,7 @@ var icon = this.props.active

    These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

    Network Images

    -

    Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

    +

    Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

    // GOOD
 <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
        style={{width: 400, height: 400}} />
@@ -142,7 +142,7 @@ var icon = this.props.active
 />

    Local Filesystem Images

    -

    See CameraRoll for an example of using local resources that are outside of Images.xcassets.

    +

    See CameraRoll for an example of using local resources that are outside of Images.xcassets.

    Best Camera Roll Image

    iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.

    Why Not Automatically Size Everything?

    diff --git a/docs/imagestore.html b/docs/imagestore.html index ecc601524bd..5043d63250f 100644 --- a/docs/imagestore.html +++ b/docs/imagestore.html @@ -31,10 +31,10 @@ });
    Edit

    ImageStore

    Methods

    Reference

    diff --git a/docs/imagestore/index.html b/docs/imagestore/index.html index ecc601524bd..5043d63250f 100644 --- a/docs/imagestore/index.html +++ b/docs/imagestore/index.html @@ -31,10 +31,10 @@ });
    Edit

    ImageStore

    Methods

    Reference

    diff --git a/docs/improvingux.html b/docs/improvingux.html index 2db9df1094b..1b883feb648 100644 --- a/docs/improvingux.html +++ b/docs/improvingux.html @@ -38,19 +38,19 @@
  • Choose keyboard type (e.g. email, numeric)
  • Make sure the return button focuses the next field or submits the form
    • -

    Check out TextInput docs for more configuration options.

    +

    Check out TextInput docs for more configuration options.

    Try it on your phone

    Manage layout when keyboard is visible

    -

    Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the KeyboardAvoidingView component.

    +

    Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the KeyboardAvoidingView component.

    Try it on your phone

    Make tappable areas larger

    -

    On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. Here's a demo:

    +

    On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. Here's a demo:

    Try it on your phone

    Use Android Ripple

    -

    Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the TouchableNativeFeedback component. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like react-native-platform-touchable to handle the platform differences for you.

    +

    Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the TouchableNativeFeedback component. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like react-native-platform-touchable to handle the platform differences for you.

    Try it on your phone

    Screen orientation lock

    diff --git a/docs/improvingux/index.html b/docs/improvingux/index.html index 2db9df1094b..1b883feb648 100644 --- a/docs/improvingux/index.html +++ b/docs/improvingux/index.html @@ -38,19 +38,19 @@
  • Choose keyboard type (e.g. email, numeric)
  • Make sure the return button focuses the next field or submits the form
    • -

    Check out TextInput docs for more configuration options.

    +

    Check out TextInput docs for more configuration options.

    Try it on your phone

    Manage layout when keyboard is visible

    -

    Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the KeyboardAvoidingView component.

    +

    Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the KeyboardAvoidingView component.

    Try it on your phone

    Make tappable areas larger

    -

    On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. Here's a demo:

    +

    On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. Here's a demo:

    Try it on your phone

    Use Android Ripple

    -

    Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the TouchableNativeFeedback component. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like react-native-platform-touchable to handle the platform differences for you.

    +

    Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the TouchableNativeFeedback component. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like react-native-platform-touchable to handle the platform differences for you.

    Try it on your phone

    Screen orientation lock

    diff --git a/docs/inputaccessoryview.html b/docs/inputaccessoryview.html index 9beed72d1a1..d7d320903a9 100644 --- a/docs/inputaccessoryview.html +++ b/docs/inputaccessoryview.html @@ -73,9 +73,9 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

    This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a TextInput with the InputAccessoryView component, and don't set a nativeID. For an example, look at InputAccessoryViewExample.js.

    Props

    Reference

    @@ -86,7 +86,7 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); TypeRequired -colorNo +colorNo
    @@ -107,7 +107,7 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); TypeRequired -styleNo +styleNo
    ← ImageKeyboardAvoidingView →
    Edit

    Layout Props

    Props

    Reference

    diff --git a/docs/layout-props/index.html b/docs/layout-props/index.html index a08051033b4..e3b28538a91 100644 --- a/docs/layout-props/index.html +++ b/docs/layout-props/index.html @@ -31,59 +31,59 @@ });
    Edit

    Layout Props

    Props

    Reference

    diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index a4119b4efe4..37cde083a8d 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -36,18 +36,18 @@

    Methods

    Properties

    Reference

    diff --git a/docs/layoutanimation/index.html b/docs/layoutanimation/index.html index a4119b4efe4..37cde083a8d 100644 --- a/docs/layoutanimation/index.html +++ b/docs/layoutanimation/index.html @@ -36,18 +36,18 @@

    Methods

    Properties

    Reference

    diff --git a/docs/linking.html b/docs/linking.html index fc0fbe5b965..96c02d0f844 100644 --- a/docs/linking.html +++ b/docs/linking.html @@ -59,7 +59,7 @@ android:name=".MainActivity" android:launchMode="singleTask"> -

    NOTE: On iOS, you'll need to link RCTLinking to your project by following the steps described here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

    +

    NOTE: On iOS, you'll need to link RCTLinking to your project by following the steps described here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

    // iOS 9.x or newer
 #import <React/RCTLinkingManager.h>
 
@@ -116,12 +116,12 @@

    Methods

    Reference

    diff --git a/docs/linking/index.html b/docs/linking/index.html index fc0fbe5b965..96c02d0f844 100644 --- a/docs/linking/index.html +++ b/docs/linking/index.html @@ -59,7 +59,7 @@ android:name=".MainActivity" android:launchMode="singleTask"> -

    NOTE: On iOS, you'll need to link RCTLinking to your project by following the steps described here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

    +

    NOTE: On iOS, you'll need to link RCTLinking to your project by following the steps described here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

    // iOS 9.x or newer
 #import <React/RCTLinkingManager.h>
 
@@ -116,12 +116,12 @@

    Methods

    Reference

    diff --git a/docs/listview.html b/docs/listview.html index eb3e9d78278..997c430a61c 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,4 +1,4 @@ -ListView · React Native
    Edit

    ListView

    DEPRECATED - use one of the new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this blog post for more details.

    -

    ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.

    +
    Edit

    ListView

    DEPRECATED - use one of the new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this blog post for more details.

    +

    ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.

    Minimal example:

    class MyComponent extends Component {
   constructor() {
@@ -59,39 +59,39 @@
 
 
    Props
    
 
 
 
    Methods
    
 
 
    
 
    Reference
    
 
    Props
    
 
    dataSource
    
-
    An instance of ListView.DataSource to use
    
+
    An instance of ListView.DataSource to use
    
 
diff --git a/docs/listview/index.html b/docs/listview/index.html
index eb3e9d78278..997c430a61c 100644
--- a/docs/listview/index.html
+++ b/docs/listview/index.html
@@ -1,4 +1,4 @@
-ListView · React Native
    Edit
    ListView
    DEPRECATED - use one of the new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this blog post for more details.
    
-
    ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
    
+        
    Edit
    ListView
    DEPRECATED - use one of the new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this blog post for more details.
    
+
    ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
    
 
    Minimal example:
    
 
    class MyComponent extends Component {
   constructor() {
@@ -59,39 +59,39 @@
 
 
    Props
    
 
 
 
    Methods
    
 
 
    
 
    Reference
    
 
    Props
    
 
    dataSource
    
-
    An instance of ListView.DataSource to use
    
+
    An instance of ListView.DataSource to use
    
 
    
 
 
    TypeRequired
    
diff --git a/docs/listviewdatasource.html b/docs/listviewdatasource.html
index da8698563ce..14666bd6ee5 100644
--- a/docs/listviewdatasource.html
+++ b/docs/listviewdatasource.html
@@ -45,18 +45,18 @@ _onDataArrived(newData) {
 
    Methods
    Reference
    
diff --git a/docs/listviewdatasource/index.html b/docs/listviewdatasource/index.html
index da8698563ce..14666bd6ee5 100644
--- a/docs/listviewdatasource/index.html
+++ b/docs/listviewdatasource/index.html
@@ -45,18 +45,18 @@ _onDataArrived(newData) {
 
    Methods
    Reference
    
diff --git a/docs/maintainers.html b/docs/maintainers.html
index 156504bd2c8..60583ad284a 100644
--- a/docs/maintainers.html
+++ b/docs/maintainers.html
@@ -1,4 +1,4 @@
-What to Expect from Maintainers · React Native
    Edit
    What to Expect from Maintainers
    So you have read through the contributor's guide and you're getting ready to send your first pull request. Perhaps you've found an issue in React Native and want to work with the maintainers to land a fix. Here's what you can expect to happen when you open an issue or send a pull request.
    
+        
    Edit
    What to Expect from Maintainers
    So you have read through the contributor's guide and you're getting ready to send your first pull request. Perhaps you've found an issue in React Native and want to work with the maintainers to land a fix. Here's what you can expect to happen when you open an issue or send a pull request.
    
 
    
 
    The following is adapted from the excellent Open Source Guide from GitHub and reflects how the maintainers of React Native are encouraged to handle your contributions.
    
 
    
@@ -39,9 +39,9 @@
 
  • New issues should follow the Issue Template.
    • 
 
  • Issues should provide clear, easy to follow steps alongside sample code to reproduce the issue. Ideally, provide a Snack.
    • 
 
-
    Issues that do not meet the above criteria can be closed immediately, with a link to the contributor's guide.
    
+
    Issues that do not meet the above criteria can be closed immediately, with a link to the contributor's guide.
    
 
    New issue runbook
    
-
    You have gathered all the information required to open a new issue, and you are confident it meets the contributor guidelines. Once you post an issue, this is what our maintainers will consider when deciding how to move forward:
    
+
    You have gathered all the information required to open a new issue, and you are confident it meets the contributor guidelines. Once you post an issue, this is what our maintainers will consider when deciding how to move forward:
    
 
      
 
    • Is this issue a feature request?
      
 
      Some features may not be a good fit for the core React Native library. This is usually the case for *new modules that Facebook does not use in production. In this case, a maintainer will explain that this should be released to npm as a separate module, allowing users to easily pull in the module in their projects.
      
@@ -101,7 +101,7 @@
 
      
 
      Hey @author, thanks for sending the pull request. Can you please add all the info specified in the template? This is necessary for people to be able to understand and review your pull request.
      
 
      • 
-
    • Does the code style match the Style guide?
      
+
    • Does the code style match the Style guide?
      
 
      If not, link to the style guide and add the label 'Needs revision'.
      • 
 
    • Does the pull request add a completely new feature we don't want to add to the core and maintain?
      
 
      Ask the author to release it a separate npm module and close the pull request.
      • 
diff --git a/docs/maintainers/index.html b/docs/maintainers/index.html
index 156504bd2c8..60583ad284a 100644
--- a/docs/maintainers/index.html
+++ b/docs/maintainers/index.html
@@ -1,4 +1,4 @@
-What to Expect from Maintainers · React Native
    Edit
    What to Expect from Maintainers
    So you have read through the contributor's guide and you're getting ready to send your first pull request. Perhaps you've found an issue in React Native and want to work with the maintainers to land a fix. Here's what you can expect to happen when you open an issue or send a pull request.
    
+        
    Edit
    What to Expect from Maintainers
    So you have read through the contributor's guide and you're getting ready to send your first pull request. Perhaps you've found an issue in React Native and want to work with the maintainers to land a fix. Here's what you can expect to happen when you open an issue or send a pull request.
    
 
    
 
    The following is adapted from the excellent Open Source Guide from GitHub and reflects how the maintainers of React Native are encouraged to handle your contributions.
    
 
    
@@ -39,9 +39,9 @@
 
  • New issues should follow the Issue Template.
    • 
 
  • Issues should provide clear, easy to follow steps alongside sample code to reproduce the issue. Ideally, provide a Snack.
    • 
 
-
    Issues that do not meet the above criteria can be closed immediately, with a link to the contributor's guide.
    
+
    Issues that do not meet the above criteria can be closed immediately, with a link to the contributor's guide.
    
 
    New issue runbook
    
-
    You have gathered all the information required to open a new issue, and you are confident it meets the contributor guidelines. Once you post an issue, this is what our maintainers will consider when deciding how to move forward:
    
+
    You have gathered all the information required to open a new issue, and you are confident it meets the contributor guidelines. Once you post an issue, this is what our maintainers will consider when deciding how to move forward:
    
 
      
 
    • Is this issue a feature request?
      
 
      Some features may not be a good fit for the core React Native library. This is usually the case for *new modules that Facebook does not use in production. In this case, a maintainer will explain that this should be released to npm as a separate module, allowing users to easily pull in the module in their projects.
      
@@ -101,7 +101,7 @@
 
      
 
      Hey @author, thanks for sending the pull request. Can you please add all the info specified in the template? This is necessary for people to be able to understand and review your pull request.
      
 
      • 
-
    • Does the code style match the Style guide?
      
+
    • Does the code style match the Style guide?
      
 
      If not, link to the style guide and add the label 'Needs revision'.
      • 
 
    • Does the pull request add a completely new feature we don't want to add to the core and maintain?
      
 
      Ask the author to release it a separate npm module and close the pull request.
      • 
diff --git a/docs/maskedviewios.html b/docs/maskedviewios.html
index 1e0c16415fb..e4632214e48 100644
--- a/docs/maskedviewios.html
+++ b/docs/maskedviewios.html
@@ -72,10 +72,10 @@
 
      The alpha channel of the view rendered by the maskElement prop determines how much of the view's content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.
      
 
      Props
      
 
 
 
      
 
      Reference
      
diff --git a/docs/maskedviewios/index.html b/docs/maskedviewios/index.html
index 1e0c16415fb..e4632214e48 100644
--- a/docs/maskedviewios/index.html
+++ b/docs/maskedviewios/index.html
@@ -72,10 +72,10 @@
 
      The alpha channel of the view rendered by the maskElement prop determines how much of the view's content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.
      
 
      Props
      
 
 
 
      
 
      Reference
      
diff --git a/docs/modal.html b/docs/modal.html
index 600c7690a26..7e721a8d795 100644
--- a/docs/modal.html
+++ b/docs/modal.html
@@ -82,17 +82,17 @@
 
 
      Props
      
 
 
      
 
      Reference
      
diff --git a/docs/modal/index.html b/docs/modal/index.html
index 600c7690a26..7e721a8d795 100644
--- a/docs/modal/index.html
+++ b/docs/modal/index.html
@@ -82,17 +82,17 @@
 
 
      Props
      
 
 
      
 
      Reference
      
diff --git a/docs/more-resources.html b/docs/more-resources.html
index 23ecf58bee4..50d9e05c779 100644
--- a/docs/more-resources.html
+++ b/docs/more-resources.html
@@ -41,7 +41,7 @@
 
        
 
      • Fellow developers write and publish React Native modules to npm and open source them on GitHub.
        • 
 
      • Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.
        • 
-
      • Read the guides on Native Modules (iOS, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.
        • 
+
      • Read the guides on Native Modules (iOS, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.
        • 
 
      • Looking for a pre-built component? Check JS.coach.
        • 
 
      
 
      Development Tools
      
@@ -49,7 +49,7 @@
 
      Ignite is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you.
      
 
      CodePush is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give CodePush a try.
      
 
      Expo is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.
      
-
      The React Developer Tools are great for debugging React and React Native apps.
      
+
      The React Developer Tools are great for debugging React and React Native apps.
      
 
      Where React Native People Hang Out
      
 
      The forum at discuss.reactjs.org is a great place for discussion about best practices and application architecture as well as the future of React Native.
      
 
      Reactiflux is a Discord chat where a lot of React-related discussion happens, including React Native. Discord is just like Slack except it works better for open source projects with a zillion contributors. Check out the #react-native channel.
      
diff --git a/docs/more-resources/index.html b/docs/more-resources/index.html
index 23ecf58bee4..50d9e05c779 100644
--- a/docs/more-resources/index.html
+++ b/docs/more-resources/index.html
@@ -41,7 +41,7 @@
 
        
 
      • Fellow developers write and publish React Native modules to npm and open source them on GitHub.
        • 
 
      • Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.
        • 
-
      • Read the guides on Native Modules (iOS, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.
        • 
+
      • Read the guides on Native Modules (iOS, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.
        • 
 
      • Looking for a pre-built component? Check JS.coach.
        • 
 
      
 
      Development Tools
      
@@ -49,7 +49,7 @@
 
      Ignite is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you.
      
 
      CodePush is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give CodePush a try.
      
 
      Expo is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.
      
-
      The React Developer Tools are great for debugging React and React Native apps.
      
+
      The React Developer Tools are great for debugging React and React Native apps.
      
 
      Where React Native People Hang Out
      
 
      The forum at discuss.reactjs.org is a great place for discussion about best practices and application architecture as well as the future of React Native.
      
 
      Reactiflux is a Discord chat where a lot of React-related discussion happens, including React Native. Discord is just like Slack except it works better for open source projects with a zillion contributors. Check out the #react-native channel.
      
diff --git a/docs/native-components-android.html b/docs/native-components-android.html
index 42f0d05e803..a1812013e59 100644
--- a/docs/native-components-android.html
+++ b/docs/native-components-android.html
@@ -85,7 +85,7 @@
   }
 
 
      4. Register the ViewManager
      
-
      The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.
      
+
      The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.
      
 
        @Override
   public List<ViewManager> createViewManagers(
                             ReactApplicationContext reactContext) {
diff --git a/docs/native-components-android/index.html b/docs/native-components-android/index.html
index 42f0d05e803..a1812013e59 100644
--- a/docs/native-components-android/index.html
+++ b/docs/native-components-android/index.html
@@ -85,7 +85,7 @@
   }
 
      
 
      4. Register the ViewManager
      
-
      The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.
      
+
      The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.
      
 
        @Override
   public List<ViewManager> createViewManagers(
                             ReactApplicationContext reactContext) {
diff --git a/docs/navigation.html b/docs/navigation.html
index f5486a99ef0..39539872f93 100644
--- a/docs/navigation.html
+++ b/docs/navigation.html
@@ -30,8 +30,8 @@
               }
             });
         
    Edit
    Navigating Between Screens
    Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
    
-
    This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as redux.
    
-
    If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
    
+
    This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as redux.
    
+
    If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
    
 
    If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: native-navigation, react-native-navigation.
    
 
    React Navigation
    
 
    The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
    
@@ -69,7 +69,7 @@ export default App;
 }
     
 
    React Navigation routers make it easy to override navigation logic or integrate it into redux. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.
    
-
    The views in React Navigation use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
    
+
    The views in React Navigation use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
    
 
    For a complete intro to React Navigation, follow the React Navigation Getting Started Guide, or browse other docs such as the Intro to Navigators.
    
 
    NavigatorIOS
    
 
    NavigatorIOS looks and feels just like UINavigationController, because it is actually built on top of it.
    
@@ -138,7 +138,7 @@ class MyScene extends React.Component {
   }
 }
 
-
    Check out the NavigatorIOS reference docs to learn more about this component.
    
+
    Check out the NavigatorIOS reference docs to learn more about this component.
    
 
    ← Platform Specific CodeImages →
    Edit
    Navigating Between Screens
    Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
    
-
    This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as redux.
    
-
    If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
    
+
    This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as redux.
    
+
    If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
    
 
    If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: native-navigation, react-native-navigation.
    
 
    React Navigation
    
 
    The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
    
@@ -69,7 +69,7 @@ export default App;
 }
 
 
    React Navigation routers make it easy to override navigation logic or integrate it into redux. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.
    
-
    The views in React Navigation use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
    
+
    The views in React Navigation use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
    
 
    For a complete intro to React Navigation, follow the React Navigation Getting Started Guide, or browse other docs such as the Intro to Navigators.
    
 
    NavigatorIOS
    
 
    NavigatorIOS looks and feels just like UINavigationController, because it is actually built on top of it.
    
@@ -138,7 +138,7 @@ class MyScene extends React.Component {
   }
 }
 
-
    Check out the NavigatorIOS reference docs to learn more about this component.
    
+
    Check out the NavigatorIOS reference docs to learn more about this component.
    
 
    ← Platform Specific CodeImages →
    Edit
    PanResponder
    PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.
    
 
    By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.
    
-
    It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object:
    
+
    It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object:
    
 
    onPanResponderMove: (event, gestureState) => {}
 
    
 
    A native event is a synthetic touch event with the following form:
    
@@ -113,7 +113,7 @@
 
    To see it in action, try the PanResponder example in RNTester
    
 
    Methods
    
 
 
    
 
    Reference
    
diff --git a/docs/panresponder/index.html b/docs/panresponder/index.html
index 2357f082ff4..bfacf77dac2 100644
--- a/docs/panresponder/index.html
+++ b/docs/panresponder/index.html
@@ -31,7 +31,7 @@
             });
         
    Edit
    PanResponder
    PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.
    
 
    By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.
    
-
    It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object:
    
+
    It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object:
    
 
    onPanResponderMove: (event, gestureState) => {}
 
    
 
    A native event is a synthetic touch event with the following form:
    
@@ -113,7 +113,7 @@
 
    To see it in action, try the PanResponder example in RNTester
    
 
    Methods
    
 
 
    
 
    Reference
    
diff --git a/docs/performance.html b/docs/performance.html
index 00be9dd8421..667f8c0c2a0 100644
--- a/docs/performance.html
+++ b/docs/performance.html
@@ -30,7 +30,7 @@
               }
             });
         
    Edit
    Performance
    A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible.
    
-
    This guide is intended to teach you some basics to help you to troubleshoot performance issues, as well as discuss common sources of problems and their suggested solutions.
    
+
    This guide is intended to teach you some basics to help you to troubleshoot performance issues, as well as discuss common sources of problems and their suggested solutions.
    
 
    What you need to know about frames
    
 
    Your grandparents' generation called movies "moving pictures" for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.
    
 
    Now to confuse the matter a little bit, open up the developer menu in your app and toggle Show Perf Monitor. You will notice that there are two different frame rates.
    
@@ -44,7 +44,7 @@
 
    Similarly, you can happily scroll up and down through a ScrollView when the JavaScript thread is locked up because the ScrollView lives on the main thread. The scroll events are dispatched to the JS thread, but their receipt is not necessary for the scroll to occur.
    
 
    Common sources of performance problems
    
 
    Running in development mode (dev=true)
    
-
    JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in release builds.
    
+
    JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in release builds.
    
 
    Using console.log statements
    
 
    When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as redux-logger, so make sure to remove them before bundling. You can also use this babel plugin that removes all the console.* calls. You need to install it first with npm i babel-plugin-transform-remove-console --save-dev, and then edit the .babelrc file under your project directory like this:
    
 
    {
@@ -57,8 +57,8 @@
 
    
 
    This will automatically remove all console.* calls in the release (production) versions of your project.
    
 
    ListView initial rendering is too slow or scroll performance is bad for large lists
    
-
    Use the new FlatList or SectionList component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.
    
-
    If your FlatList is rendering slow, be sure that you've implemented getItemLayout to optimize rendering speed by skipping measurement of the rendered items.
    
+
    Use the new FlatList or SectionList component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.
    
+
    If your FlatList is rendering slow, be sure that you've implemented getItemLayout to optimize rendering speed by skipping measurement of the rendered items.
    
 
    JS FPS plunges when re-rendering a view that hardly changes
    
 
    If you are using a ListView, you must provide a rowHasChanged function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.
    
 
    Similarly, you can implement shouldComponentUpdate and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
    
@@ -91,11 +91,11 @@
 
  • Each frame during this transition, the JavaScript thread needs to send a new x-offset to the main thread. If the JavaScript thread is locked up, it cannot do this and so no update occurs on that frame and the animation stutters.
    • 
 
 
    One solution to this is to allow for JavaScript-based animations to be offloaded to the main thread. If we were to do the same thing as in the above example with this approach, we might calculate a list of all x-offsets for the new scene when we are starting the transition and send them to the main thread to execute in an optimized way. Now that the JavaScript thread is freed of this responsibility, it's not a big deal if it drops a few frames while rendering the scene -- you probably won't even notice because you will be too distracted by the pretty transition.
    
-
    Solving this is one of the main goals behind the new React Navigation library. The views in React Navigation use native components and the Animated library to deliver 60 FPS animations that are run on the native thread.
    
+
    Solving this is one of the main goals behind the new React Navigation library. The views in React Navigation use native components and the Animated library to deliver 60 FPS animations that are run on the native thread.
    
 
    Profiling
    
 
    Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu.
    
-
    For iOS, Instruments is an invaluable tool, and on Android you should learn to use systrace.
    
-
    But first, make sure that Development Mode is OFF! You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs.
    
+
    For iOS, Instruments is an invaluable tool, and on Android you should learn to use systrace.
    
+
    But first, make sure that Development Mode is OFF! You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs.
    
 
    Another way to profile JavaScript is to use the Chrome profiler while debugging. This won't give you accurate results as the code is running in Chrome but will give you a general idea of where bottlenecks might be. Run the profiler under Chrome's Performance tab. A flame graph will appear under User Timing. To view more details in tabular format, click at the Bottom Up tab below and then select DedicatedWorker Thread at the top left menu.
    
 
    Profiling Android UI Performance with systrace
    
 
    Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve -- and many times it's not native code's fault at all!
    
diff --git a/docs/performance/index.html b/docs/performance/index.html
index 00be9dd8421..667f8c0c2a0 100644
--- a/docs/performance/index.html
+++ b/docs/performance/index.html
@@ -30,7 +30,7 @@
               }
             });
         
    Edit
    Performance
    A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible.
    
-
    This guide is intended to teach you some basics to help you to troubleshoot performance issues, as well as discuss common sources of problems and their suggested solutions.
    
+
    This guide is intended to teach you some basics to help you to troubleshoot performance issues, as well as discuss common sources of problems and their suggested solutions.
    
 
    What you need to know about frames
    
 
    Your grandparents' generation called movies "moving pictures" for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.
    
 
    Now to confuse the matter a little bit, open up the developer menu in your app and toggle Show Perf Monitor. You will notice that there are two different frame rates.
    
@@ -44,7 +44,7 @@
 
    Similarly, you can happily scroll up and down through a ScrollView when the JavaScript thread is locked up because the ScrollView lives on the main thread. The scroll events are dispatched to the JS thread, but their receipt is not necessary for the scroll to occur.
    
 
    Common sources of performance problems
    
 
    Running in development mode (dev=true)
    
-
    JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in release builds.
    
+
    JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in release builds.
    
 
    Using console.log statements
    
 
    When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as redux-logger, so make sure to remove them before bundling. You can also use this babel plugin that removes all the console.* calls. You need to install it first with npm i babel-plugin-transform-remove-console --save-dev, and then edit the .babelrc file under your project directory like this:
    
 
    {
@@ -57,8 +57,8 @@
 
    
 
    This will automatically remove all console.* calls in the release (production) versions of your project.
    
 
    ListView initial rendering is too slow or scroll performance is bad for large lists
    
-
    Use the new FlatList or SectionList component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.
    
-
    If your FlatList is rendering slow, be sure that you've implemented getItemLayout to optimize rendering speed by skipping measurement of the rendered items.
    
+
    Use the new FlatList or SectionList component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.
    
+
    If your FlatList is rendering slow, be sure that you've implemented getItemLayout to optimize rendering speed by skipping measurement of the rendered items.
    
 
    JS FPS plunges when re-rendering a view that hardly changes
    
 
    If you are using a ListView, you must provide a rowHasChanged function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.
    
 
    Similarly, you can implement shouldComponentUpdate and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
    
@@ -91,11 +91,11 @@
 
  • Each frame during this transition, the JavaScript thread needs to send a new x-offset to the main thread. If the JavaScript thread is locked up, it cannot do this and so no update occurs on that frame and the animation stutters.
    • 
 
 
    One solution to this is to allow for JavaScript-based animations to be offloaded to the main thread. If we were to do the same thing as in the above example with this approach, we might calculate a list of all x-offsets for the new scene when we are starting the transition and send them to the main thread to execute in an optimized way. Now that the JavaScript thread is freed of this responsibility, it's not a big deal if it drops a few frames while rendering the scene -- you probably won't even notice because you will be too distracted by the pretty transition.
    
-
    Solving this is one of the main goals behind the new React Navigation library. The views in React Navigation use native components and the Animated library to deliver 60 FPS animations that are run on the native thread.
    
+
    Solving this is one of the main goals behind the new React Navigation library. The views in React Navigation use native components and the Animated library to deliver 60 FPS animations that are run on the native thread.
    
 
    Profiling
    
 
    Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu.
    
-
    For iOS, Instruments is an invaluable tool, and on Android you should learn to use systrace.
    
-
    But first, make sure that Development Mode is OFF! You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs.
    
+
    For iOS, Instruments is an invaluable tool, and on Android you should learn to use systrace.
    
+
    But first, make sure that Development Mode is OFF! You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs.
    
 
    Another way to profile JavaScript is to use the Chrome profiler while debugging. This won't give you accurate results as the code is running in Chrome but will give you a general idea of where bottlenecks might be. Run the profiler under Chrome's Performance tab. A flame graph will appear under User Timing. To view more details in tabular format, click at the Bottom Up tab below and then select DedicatedWorker Thread at the top left menu.
    
 
    Profiling Android UI Performance with systrace
    
 
    Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve -- and many times it's not native code's fault at all!
    
diff --git a/docs/permissionsandroid.html b/docs/permissionsandroid.html
index 99c0d844504..e3cdef5c62a 100644
--- a/docs/permissionsandroid.html
+++ b/docs/permissionsandroid.html
@@ -102,10 +102,10 @@
 
 
    Methods
    
 
 
    
 
    Reference
    
diff --git a/docs/permissionsandroid/index.html b/docs/permissionsandroid/index.html
index 99c0d844504..e3cdef5c62a 100644
--- a/docs/permissionsandroid/index.html
+++ b/docs/permissionsandroid/index.html
@@ -102,10 +102,10 @@
 
 
    Methods
    
 
 
    
 
    Reference
    
diff --git a/docs/picker-item.html b/docs/picker-item.html
index 401bd8e5850..d094bee0346 100644
--- a/docs/picker-item.html
+++ b/docs/picker-item.html
@@ -1,4 +1,4 @@
-Picker.Item · React Native
    0.56
    Edit
    Picker.Item
    
-
+
    
 
 
    TypeRequired
    
 
 
 
 
 
 
 
 
    TypeRequired
    
     
 
    colorNo
    colorNo
    
     
 
    
 
    testID
    
diff --git a/docs/picker-item/index.html b/docs/picker-item/index.html
index 401bd8e5850..d094bee0346 100644
--- a/docs/picker-item/index.html
+++ b/docs/picker-item/index.html
@@ -1,4 +1,4 @@
-Picker.Item · React Native
    0.56
    Edit
    Picker.Item
    Individual selectable item in a Picker.
    
+            
    0.56
    Edit
    Picker.Item
    Individual selectable item in a Picker.
    
 
    Props
    
 
 
    
 
    Reference
    
@@ -34,7 +34,7 @@
 TypeRequired
 
 
-colorNo
+colorNo
 
 
 
    testID
    
diff --git a/docs/picker-style-props.html b/docs/picker-style-props.html
index 9ef329e051c..6f943a8c161 100644
--- a/docs/picker-style-props.html
+++ b/docs/picker-style-props.html
@@ -1,4 +1,4 @@
-Picker Style Props · React Native
    0.56
    Edit
    Picker Style Props
    Picker style props.
    
+            
    0.56
    Edit
    Picker Style Props
    Picker style props.
    
 
    Props
    
 
 
    
 
    Reference
    
diff --git a/docs/picker-style-props/index.html b/docs/picker-style-props/index.html
index 9ef329e051c..6f943a8c161 100644
--- a/docs/picker-style-props/index.html
+++ b/docs/picker-style-props/index.html
@@ -1,4 +1,4 @@
-Picker Style Props · React Native
    0.56
    Edit
    Picker Style Props

    Props

    Reference

    @@ -146,7 +146,7 @@ TypeRequiredPlatform -text stylesNoiOS +text stylesNoiOS
    ← NavigatorIOSPickerIOS →
    Edit

    PickerIOS

    Props

    Reference

    @@ -47,7 +47,7 @@ TypeRequired -text stylesNo +text stylesNo
    diff --git a/docs/pickerios/index.html b/docs/pickerios/index.html index 55f84738bbd..1a0b5dc2e49 100644 --- a/docs/pickerios/index.html +++ b/docs/pickerios/index.html @@ -31,12 +31,12 @@ });
    Edit

    PickerIOS

    Props

    Reference

    @@ -47,7 +47,7 @@ TypeRequired -text stylesNo +text stylesNo
    diff --git a/docs/pixelratio.html b/docs/pixelratio.html index 8eba3ca6f4c..c5a0ef589b9 100644 --- a/docs/pixelratio.html +++ b/docs/pixelratio.html @@ -45,11 +45,11 @@

    In React Native, everything in JavaScript and within the layout engine works with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

    Methods

    Reference

    diff --git a/docs/pixelratio/index.html b/docs/pixelratio/index.html index 8eba3ca6f4c..c5a0ef589b9 100644 --- a/docs/pixelratio/index.html +++ b/docs/pixelratio/index.html @@ -45,11 +45,11 @@

    In React Native, everything in JavaScript and within the layout engine works with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

    Methods

    Reference

    diff --git a/docs/platform-specific-code.html b/docs/platform-specific-code.html index 0fca2c7c029..e4cd6331342 100644 --- a/docs/platform-specific-code.html +++ b/docs/platform-specific-code.html @@ -32,8 +32,8 @@
    Edit

    Platform Specific Code

    When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.

    React Native provides two ways to easily organize your code and separate it by platform:

    Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.

    Platform module

    diff --git a/docs/platform-specific-code/index.html b/docs/platform-specific-code/index.html index 0fca2c7c029..e4cd6331342 100644 --- a/docs/platform-specific-code/index.html +++ b/docs/platform-specific-code/index.html @@ -32,8 +32,8 @@
    Edit

    Platform Specific Code

    When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.

    React Native provides two ways to easily organize your code and separate it by platform:

    Certain components may have properties that work on one platform only. All of these props are annotated with @platform and have a small badge next to them on the website.

    Platform module

    diff --git a/docs/progressbarandroid.html b/docs/progressbarandroid.html index 9ac7057018c..085872ab685 100644 --- a/docs/progressbarandroid.html +++ b/docs/progressbarandroid.html @@ -68,15 +68,15 @@ const styles = StyleSheet.create({

    Props

    Reference

    @@ -99,7 +99,7 @@ const styles = StyleSheet.create({ TypeRequired -colorNo +colorNo
    diff --git a/docs/progressbarandroid/index.html b/docs/progressbarandroid/index.html index 9ac7057018c..085872ab685 100644 --- a/docs/progressbarandroid/index.html +++ b/docs/progressbarandroid/index.html @@ -68,15 +68,15 @@ const styles = StyleSheet.create({

    Props

    Reference

    @@ -99,7 +99,7 @@ const styles = StyleSheet.create({ TypeRequired -colorNo +colorNo
    diff --git a/docs/progressviewios.html b/docs/progressviewios.html index 9638a03c1a0..10319fddd22 100644 --- a/docs/progressviewios.html +++ b/docs/progressviewios.html @@ -32,15 +32,15 @@
    Edit

    ProgressViewIOS

    Use ProgressViewIOS to render a UIProgressView on iOS.

    Props

    Reference

    diff --git a/docs/progressviewios/index.html b/docs/progressviewios/index.html index 9638a03c1a0..10319fddd22 100644 --- a/docs/progressviewios/index.html +++ b/docs/progressviewios/index.html @@ -32,15 +32,15 @@
    Edit

    ProgressViewIOS

    Use ProgressViewIOS to render a UIProgressView on iOS.

    Props

    Reference

    diff --git a/docs/props.html b/docs/props.html index 0d07c789d7b..2a207f8f799 100644 --- a/docs/props.html +++ b/docs/props.html @@ -79,8 +79,8 @@ AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

    Using name as a prop lets us customize the Greeting component, so we can reuse that component for each of our greetings. This example also uses the Greeting component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.

    -

    The other new thing going on here is the View component. A View is useful as a container for other components, to help control style and layout.

    -

    With props and the basic Text, Image, and View components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to learn about State.

    +

    The other new thing going on here is the View component. A View is useful as a container for other components, to help control style and layout.

    +

    With props and the basic Text, Image, and View components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to learn about State.

    ← Learn the BasicsState →
    Edit

    ScrollView

    Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

    Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

    Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

    -

    <ScrollView> vs <FlatList> - which one to use?

    +

    <ScrollView> vs <FlatList> - which one to use?

    ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.

    On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

    This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

    FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.

    Props

    Methods

    Reference

    @@ -250,7 +250,7 @@ const styles = StyleSheet.create({

    refreshControl

    A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. Only works for vertical ScrollViews (horizontal prop must be false).

    -

    See RefreshControl.

    +

    See RefreshControl.

    @@ -323,7 +323,7 @@ const styles = StyleSheet.create({ - +
    TypeRequired
    TypeRequiredPlatform
    colorNoAndroid
    colorNoAndroid
    diff --git a/docs/scrollview/index.html b/docs/scrollview/index.html index 73245838d28..196a36d0128 100644 --- a/docs/scrollview/index.html +++ b/docs/scrollview/index.html @@ -32,67 +32,67 @@
    Edit

    ScrollView

    Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

    Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

    Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

    -

    <ScrollView> vs <FlatList> - which one to use?

    +

    <ScrollView> vs <FlatList> - which one to use?

    ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.

    On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

    This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

    FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.

    Props

    Methods

    Reference

    @@ -250,7 +250,7 @@ const styles = StyleSheet.create({

    refreshControl

    A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. Only works for vertical ScrollViews (horizontal prop must be false).

    -

    See RefreshControl.

    +

    See RefreshControl.

    @@ -323,7 +323,7 @@ const styles = StyleSheet.create({ - +
    TypeRequired
    TypeRequiredPlatform
    colorNoAndroid
    colorNoAndroid
    diff --git a/docs/sectionlist.html b/docs/sectionlist.html index c33ccba3327..52ffc0d577c 100644 --- a/docs/sectionlist.html +++ b/docs/sectionlist.html @@ -42,7 +42,7 @@
  • Pull to Refresh.
  • Scroll loading.
    • -

    If you don't need section support and want a simpler interface, use <FlatList>.

    +

    If you don't need section support and want a simpler interface, use <FlatList>.

    Simple Examples:

    // Example 1 (Homogeneous Rendering)
 <SectionList
@@ -70,7 +70,7 @@ const overrideRenderItem = ({ item, index, section: { title, data } }) => <
   ]}
 />
    -

    This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView> that aren't explicitly listed here, along with the following caveats:

    +

    This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView> that aren't explicitly listed here, along with the following caveats:

    • Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
    • This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
      • @@ -79,56 +79,56 @@ const overrideRenderItem = ({ item, index, section: { title, data } }) => <

    Props

    Required props:

    Optional props:

    Methods

    Type Definitions

    Reference

    Props

    sections

    -

    The actual data to render, akin to the data prop in FlatList.

    +

    The actual data to render, akin to the data prop in FlatList.

    - +
    TypeRequired
    array of SectionsYes
    array of SectionsYes
    @@ -437,11 +437,11 @@ const overrideRenderItem = ({ item, index, section: { title, data } }) => < NameTypeDescription -dataarrayThe data for rendering items in this section. Array of objects, much like FlatList's data prop. +dataarrayThe data for rendering items in this section. Array of objects, much like FlatList's data prop. [key]stringOptional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default. -[renderItem]functionOptionally define an arbitrary item renderer for this section, overriding the default renderItem for the list. -[ItemSeparatorComponent]component, function, elementOptionally define an arbitrary item separator for this section, overriding the default ItemSeparatorComponent for the list. -[keyExtractor]functionOptionally define an arbitrary key extractor for this section, overriding the default keyExtractor. +[renderItem]functionOptionally define an arbitrary item renderer for this section, overriding the default renderItem for the list. +[ItemSeparatorComponent]component, function, elementOptionally define an arbitrary item separator for this section, overriding the default ItemSeparatorComponent for the list. +[keyExtractor]functionOptionally define an arbitrary key extractor for this section, overriding the default keyExtractor.
    ← ScrollViewSegmentedControlIOS →
    Edit

    Settings

    Methods

    Properties

    diff --git a/docs/settings/index.html b/docs/settings/index.html index aeee82076c1..3e45b52098f 100644 --- a/docs/settings/index.html +++ b/docs/settings/index.html @@ -31,10 +31,10 @@ });
    Edit

    Settings

    Methods

    Properties

    diff --git a/docs/shadow-props.html b/docs/shadow-props.html index d1e62770599..f40b6f068ff 100644 --- a/docs/shadow-props.html +++ b/docs/shadow-props.html @@ -31,10 +31,10 @@ });
    Edit

    Shadow Props

    Props

    Reference

    @@ -46,7 +46,7 @@ TypeRequiredPlatform -colorNoiOS +colorNoiOS
    diff --git a/docs/shadow-props/index.html b/docs/shadow-props/index.html index d1e62770599..f40b6f068ff 100644 --- a/docs/shadow-props/index.html +++ b/docs/shadow-props/index.html @@ -31,10 +31,10 @@ });
    Edit

    Shadow Props

    Props

    Reference

    @@ -46,7 +46,7 @@ TypeRequiredPlatform -colorNoiOS +colorNoiOS
    diff --git a/docs/share.html b/docs/share.html index e7fa11ec3af..8384ed0d255 100644 --- a/docs/share.html +++ b/docs/share.html @@ -31,9 +31,9 @@ });
    Edit

    Share

    Methods

    Reference

    diff --git a/docs/share/index.html b/docs/share/index.html index e7fa11ec3af..8384ed0d255 100644 --- a/docs/share/index.html +++ b/docs/share/index.html @@ -31,9 +31,9 @@ });
    Edit

    Share

    Methods

    Reference

    diff --git a/docs/slider.html b/docs/slider.html index d7521615179..d005f17afa9 100644 --- a/docs/slider.html +++ b/docs/slider.html @@ -32,25 +32,25 @@
    Edit

    Slider

    A component used to select a single value from a range of values.

    Props

    Reference

    @@ -95,7 +95,7 @@ TypeRequired -colorNo +colorNo
    @@ -150,7 +150,7 @@ TypeRequired -colorNo +colorNo
    @@ -184,7 +184,7 @@ TypeRequiredPlatform -colorNoAndroid +colorNoAndroid
    diff --git a/docs/slider/index.html b/docs/slider/index.html index d7521615179..d005f17afa9 100644 --- a/docs/slider/index.html +++ b/docs/slider/index.html @@ -32,25 +32,25 @@
    Edit

    Slider

    A component used to select a single value from a range of values.

    Props

    Reference

    @@ -95,7 +95,7 @@ TypeRequired -colorNo +colorNo
    @@ -150,7 +150,7 @@ TypeRequired -colorNo +colorNo
    @@ -184,7 +184,7 @@ TypeRequiredPlatform -colorNoAndroid +colorNoAndroid
    diff --git a/docs/snapshotviewios.html b/docs/snapshotviewios.html index 13b112c3a96..6e3eeba47cd 100644 --- a/docs/snapshotviewios.html +++ b/docs/snapshotviewios.html @@ -31,11 +31,11 @@ });
    Edit

    SnapshotViewIOS

    Props

    Reference

    diff --git a/docs/snapshotviewios/index.html b/docs/snapshotviewios/index.html index 13b112c3a96..6e3eeba47cd 100644 --- a/docs/snapshotviewios/index.html +++ b/docs/snapshotviewios/index.html @@ -31,11 +31,11 @@ });
    Edit

    SnapshotViewIOS

    Props

    Reference

    diff --git a/docs/state.html b/docs/state.html index e46481c8c35..8938f44c06e 100644 --- a/docs/state.html +++ b/docs/state.html @@ -75,7 +75,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

    In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like Redux or Mobx to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling setState directly.

    When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.

    -

    State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to learn about Style.

    +

    State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to learn about Style.

    ← PropsStyle →
    Edit

    Style

    With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

    +
    Edit

    Style

    With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

    The style prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

    As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here's an example:

    import React, { Component } from 'react';
@@ -64,8 +64,8 @@ AppRegistry.registerComponent('AwesomeProject',

    One common pattern is to make your component accept a style prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.

    -

    There are a lot more ways to customize text style. Check out the Text component reference for a complete list.

    -

    Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.

    +

    There are a lot more ways to customize text style. Check out the Text component reference for a complete list.

    +

    Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.

    ← StateHeight and Width →
    Edit

    Style

    With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

    +
    Edit

    Style

    With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

    The style prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

    As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here's an example:

    import React, { Component } from 'react';
@@ -64,8 +64,8 @@ AppRegistry.registerComponent('AwesomeProject',

    One common pattern is to make your component accept a style prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.

    -

    There are a lot more ways to customize text style. Check out the Text component reference for a complete list.

    -

    Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.

    +

    There are a lot more ways to customize text style. Check out the Text component reference for a complete list.

    +

    Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.

    ← StateHeight and Width →
    Edit

    Systrace

    Methods

    Reference

    diff --git a/docs/systrace/index.html b/docs/systrace/index.html index cc5d56aac61..9318a3a524c 100644 --- a/docs/systrace/index.html +++ b/docs/systrace/index.html @@ -31,18 +31,18 @@ });
    Edit

    Systrace

    Methods

    Reference

    diff --git a/docs/tabbarios-item.html b/docs/tabbarios-item.html index 88de5349c91..9aaa633efd4 100644 --- a/docs/tabbarios-item.html +++ b/docs/tabbarios-item.html @@ -31,20 +31,20 @@ });
    Edit

    TabBarIOS.Item

    Props

    Reference

    @@ -111,7 +111,7 @@ TypeRequired -colorNo +colorNo
    diff --git a/docs/tabbarios-item/index.html b/docs/tabbarios-item/index.html index 88de5349c91..9aaa633efd4 100644 --- a/docs/tabbarios-item/index.html +++ b/docs/tabbarios-item/index.html @@ -31,20 +31,20 @@ });
    Edit

    TabBarIOS.Item

    Props

    Reference

    @@ -111,7 +111,7 @@ TypeRequired -colorNo +colorNo
    diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 6df8b574e31..9965b1cd9fb 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -31,17 +31,17 @@ });
    Edit

    TabBarIOS

    ← SwitchTabBarIOS.Item →
    Edit

    TabBarIOS

    ← SwitchTabBarIOS.Item →
    Edit

    Testing your Changes

    This document is about testing your changes to React Native as a contributor. If you're interested in testing a React Native app, check out the React Native Tutorial on the Jest website.

    +
    Edit

    Testing your Changes

    This document is about testing your changes to React Native as a contributor. If you're interested in testing a React Native app, check out the React Native Tutorial on the Jest website.

    The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run using Circle, a continuous integration system. Circle will automatically annotate pull requests with the test results.

    Whenever you are fixing a bug or adding new functionality to React Native, you should add a test that covers it. Depending on the change you're making, there are different types of tests that may be appropriate.

    JavaScript

    Jest

    @@ -67,7 +67,7 @@ $ ./scripts/run-android-local-unit-tests.sh

    It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under ReactAndroid/src/tests, so you can browse through that directory for good examples of tests.

    Integration Tests

    -

    To run the integration tests, you need to install the Android NDK. See Prerequisites.

    +

    To run the integration tests, you need to install the Android NDK. See Prerequisites.

    You also need to install the Buck build tool.

    We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.

    Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:

    diff --git a/docs/testing/index.html b/docs/testing/index.html index 7326d4b902f..5f76df22551 100644 --- a/docs/testing/index.html +++ b/docs/testing/index.html @@ -1,4 +1,4 @@ -Testing your Changes · React Native
    Edit

    Testing your Changes

    This document is about testing your changes to React Native as a contributor. If you're interested in testing a React Native app, check out the React Native Tutorial on the Jest website.

    +
    Edit

    Testing your Changes

    This document is about testing your changes to React Native as a contributor. If you're interested in testing a React Native app, check out the React Native Tutorial on the Jest website.

    The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run using Circle, a continuous integration system. Circle will automatically annotate pull requests with the test results.

    Whenever you are fixing a bug or adding new functionality to React Native, you should add a test that covers it. Depending on the change you're making, there are different types of tests that may be appropriate.

    JavaScript

    Jest

    @@ -67,7 +67,7 @@ $ ./scripts/run-android-local-unit-tests.sh

    It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under ReactAndroid/src/tests, so you can browse through that directory for good examples of tests.

    Integration Tests

    -

    To run the integration tests, you need to install the Android NDK. See Prerequisites.

    +

    To run the integration tests, you need to install the Android NDK. See Prerequisites.

    You also need to install the Buck build tool.

    We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.

    Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:

    diff --git a/docs/text-style-props.html b/docs/text-style-props.html index ed79e027aac..e57874e1b3c 100644 --- a/docs/text-style-props.html +++ b/docs/text-style-props.html @@ -31,25 +31,25 @@ });
    Edit

    Text Style Props

    Props

    Reference

    @@ -70,7 +70,7 @@ TypeRequired -colorNo +colorNo
    @@ -142,7 +142,7 @@ TypeRequired -colorNo +colorNo
    @@ -213,7 +213,7 @@ TypeRequiredPlatform -colorNoiOS +colorNoiOS
    diff --git a/docs/text-style-props/index.html b/docs/text-style-props/index.html index ed79e027aac..e57874e1b3c 100644 --- a/docs/text-style-props/index.html +++ b/docs/text-style-props/index.html @@ -31,25 +31,25 @@ });
    Edit

    Text Style Props

    Props

    Reference

    @@ -70,7 +70,7 @@ TypeRequired -colorNo +colorNo
    @@ -142,7 +142,7 @@ TypeRequired -colorNo +colorNo
    @@ -213,7 +213,7 @@ TypeRequiredPlatform -colorNoiOS +colorNoiOS
    diff --git a/docs/text.html b/docs/text.html index f43384b7b3c..15168ba39fa 100644 --- a/docs/text.html +++ b/docs/text.html @@ -198,24 +198,24 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);

    Props

    Reference

    @@ -233,7 +233,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);

    accessible

    When set to true, indicates that the view is an accessibility element. The default value for a Text element is true.

    -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    @@ -353,9 +353,9 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
    TypeRequired
      -

    • View Style Props...

      • +

    • View Style Props...

    • textShadowOffset: object: {width: number,height: number}

      • -

    • color: color

      • +

    • color: color

    • fontSize: number

    • fontStyle: enum('normal', 'italic')

    • fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

      @@ -364,7 +364,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);

    • textAlign: enum('auto', 'left', 'right', 'center', 'justify')

      Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.

    • textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')

      • -

    • textShadowColor: color

      • +

    • textShadowColor: color

    • fontFamily: string

    • textShadowRadius: number

    • includeFontPadding: bool (Android)

      @@ -377,7 +377,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);

      Increase or decrease the spacing between characters. The default is 0, for no extra letter spacing.

      iOS: The additional space will be rendered after each glyph.

      Android: Only supported since Android 5.0 - older versions will ignore this attribute. Please note that additional space will be added around the glyphs (half on each side), which differs from the iOS rendering. It is possible to emulate the iOS rendering by using layout attributes, e.g. negative margins, as appropriate for your situation.

      • -

    • textDecorationColor: color (iOS)

      • +

    • textDecorationColor: color (iOS)

    • textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (iOS)

    • textTransform: enum('none', 'uppercase', 'lowercase', 'capitalize') (iOS)

    • writingDirection: enum('auto', 'ltr', 'rtl') (iOS)

      • @@ -412,7 +412,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool); TypeRequiredPlatform -colorNoAndroid +colorNoAndroid
      diff --git a/docs/text/index.html b/docs/text/index.html index f43384b7b3c..15168ba39fa 100644 --- a/docs/text/index.html +++ b/docs/text/index.html @@ -198,24 +198,24 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);

    Props

    Reference

    @@ -233,7 +233,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);

    accessible

    When set to true, indicates that the view is an accessibility element. The default value for a Text element is true.

    -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    @@ -353,9 +353,9 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
    TypeRequired

    see Issue#7070 for more detail.

    -

    Styles

    +

    Styles

    - +
    TypeRequired
    TextNo
    TextNo
    @@ -794,7 +794,7 @@ AppRegistry.registerComponent( TypeRequiredPlatform -colorNoAndroid +colorNoAndroid
    diff --git a/docs/textinput/index.html b/docs/textinput/index.html index b2bae41d19e..ca18a7dda52 100644 --- a/docs/textinput/index.html +++ b/docs/textinput/index.html @@ -111,61 +111,61 @@ AppRegistry.registerComponent(

    Note that on Android performing text selection in input can change app's activity windowSoftInputMode param to adjustResize. This may cause issues with components that have position: 'absolute' while keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.

    Props

    Methods

    Reference

    @@ -585,7 +585,7 @@ AppRegistry.registerComponent( TypeRequired -colorNo +colorNo
    @@ -665,7 +665,7 @@ AppRegistry.registerComponent( TypeRequired -colorNo +colorNo
    @@ -766,13 +766,13 @@ AppRegistry.registerComponent(
  • borderBottomLeftRadius

    • see Issue#7070 for more detail.

    -

    Styles

    +

    Styles

    - +
    TypeRequired
    TextNo
    TextNo
    @@ -794,7 +794,7 @@ AppRegistry.registerComponent( TypeRequiredPlatform -colorNoAndroid +colorNoAndroid
    diff --git a/docs/timepickerandroid.html b/docs/timepickerandroid.html index 36b5fc83998..f09e74104cd 100644 --- a/docs/timepickerandroid.html +++ b/docs/timepickerandroid.html @@ -46,9 +46,9 @@

    Methods

    Reference

    diff --git a/docs/timepickerandroid/index.html b/docs/timepickerandroid/index.html index 36b5fc83998..f09e74104cd 100644 --- a/docs/timepickerandroid/index.html +++ b/docs/timepickerandroid/index.html @@ -46,9 +46,9 @@

    Methods

    Reference

    diff --git a/docs/toastandroid.html b/docs/toastandroid.html index 1e19607ab4d..694f53e678b 100644 --- a/docs/toastandroid.html +++ b/docs/toastandroid.html @@ -53,17 +53,17 @@ ToastAndroid.showWithGravityAndOffset(

    Methods

    Properties

    Reference

    diff --git a/docs/toastandroid/index.html b/docs/toastandroid/index.html index 1e19607ab4d..694f53e678b 100644 --- a/docs/toastandroid/index.html +++ b/docs/toastandroid/index.html @@ -53,17 +53,17 @@ ToastAndroid.showWithGravityAndOffset(

    Methods

    Properties

    Reference

    diff --git a/docs/toolbarandroid.html b/docs/toolbarandroid.html index 1a6f56f894b..6a17ee623f9 100644 --- a/docs/toolbarandroid.html +++ b/docs/toolbarandroid.html @@ -50,23 +50,23 @@ onActionSelected: functio

    Props

    Reference

    @@ -199,7 +199,7 @@ onActionSelected: functio TypeRequired -colorNo +colorNo
    @@ -232,7 +232,7 @@ onActionSelected: functio TypeRequired -colorNo +colorNo
    ← TextInputTouchableHighlight →
    Edit

    Transforms

    Props

    Reference

    diff --git a/docs/transforms/index.html b/docs/transforms/index.html index 9bd2076bf53..d3d7d872d37 100644 --- a/docs/transforms/index.html +++ b/docs/transforms/index.html @@ -31,14 +31,14 @@ });
    Edit

    Transforms

    Props

    Reference

    diff --git a/docs/troubleshooting.html b/docs/troubleshooting.html index c39c623fa80..624da54f47c 100644 --- a/docs/troubleshooting.html +++ b/docs/troubleshooting.html @@ -51,7 +51,7 @@ sudo chown -R $USER /usr/local/lib/node_modules

    Missing libraries for React

    -

    If you added React Native manually to your project, make sure you have included all the relevant dependencies that you are using, like RCTText.xcodeproj, RCTImage.xcodeproj. Next, the binaries built by these dependencies have to be linked to your app binary. Use the Linked Frameworks and Binaries section in the Xcode project settings. More detailed steps are here: Linking Libraries.

    +

    If you added React Native manually to your project, make sure you have included all the relevant dependencies that you are using, like RCTText.xcodeproj, RCTImage.xcodeproj. Next, the binaries built by these dependencies have to be linked to your app binary. Use the Linked Frameworks and Binaries section in the Xcode project settings. More detailed steps are here: Linking Libraries.

    If you are using CocoaPods, verify that you have added React along with the subspecs to the Podfile. For example, if you were using the <Text />, <Image /> and fetch() APIs, you would need to add these in your Podfile:

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
   'RCTText',
diff --git a/docs/troubleshooting/index.html b/docs/troubleshooting/index.html
index c39c623fa80..624da54f47c 100644
--- a/docs/troubleshooting/index.html
+++ b/docs/troubleshooting/index.html
@@ -51,7 +51,7 @@
 sudo chown -R $USER /usr/local/lib/node_modules

    Missing libraries for React

    -

    If you added React Native manually to your project, make sure you have included all the relevant dependencies that you are using, like RCTText.xcodeproj, RCTImage.xcodeproj. Next, the binaries built by these dependencies have to be linked to your app binary. Use the Linked Frameworks and Binaries section in the Xcode project settings. More detailed steps are here: Linking Libraries.

    +

    If you added React Native manually to your project, make sure you have included all the relevant dependencies that you are using, like RCTText.xcodeproj, RCTImage.xcodeproj. Next, the binaries built by these dependencies have to be linked to your app binary. Use the Linked Frameworks and Binaries section in the Xcode project settings. More detailed steps are here: Linking Libraries.

    If you are using CocoaPods, verify that you have added React along with the subspecs to the Podfile. For example, if you were using the <Text />, <Image /> and fetch() APIs, you would need to add these in your Podfile:

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
   'RCTText',
diff --git a/docs/tutorial.html b/docs/tutorial.html
index dd8ccfc5963..ad5bb40f288 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -55,7 +55,7 @@
 
    Components
    
 
    So this code is defining HelloWorldApp, a new Component. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a render function which returns some JSX to render.
    
 
    This app doesn't do very much
    
-
    Good point. To make components do more interesting things, you need to learn about Props.
    
+
    Good point. To make components do more interesting things, you need to learn about Props.
    ← Getting StartedProps →
    Edit

    Using List Views

    React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList.

    -

    The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

    +
    Edit

    Using List Views

    React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList.

    +

    The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

    The FlatList component requires two props: data and renderItem. data is the source of information for the list. renderItem takes one item from the source and returns a formatted component to render.

    This example creates a simple FlatList of hardcoded data. Each item in the data props is rendered as a Text component. The FlatListBasics component then renders the FlatList and all Text components.

    If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on iOS, then a SectionList is the way to go.

    + >

    If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on iOS, then a SectionList is the way to go.

    One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.

    + >

    One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.

    ← Using a ScrollViewNetworking →
    Edit

    Using List Views

    React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList.

    -

    The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

    +
    Edit

    Using List Views

    React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList.

    +

    The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

    The FlatList component requires two props: data and renderItem. data is the source of information for the list. renderItem takes one item from the source and returns a formatted component to render.

    This example creates a simple FlatList of hardcoded data. Each item in the data props is rendered as a Text component. The FlatListBasics component then renders the FlatList and all Text components.

    If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on iOS, then a SectionList is the way to go.

    + >

    If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on iOS, then a SectionList is the way to go.

    One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.

    + >

    One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.

    ← Using a ScrollViewNetworking →
    Edit

    Using a ScrollView

    The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).

    +
    Edit

    Using a ScrollView

    The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).

    This example creates a vertical ScrollView with both images and text mixed together.

    import React, { Component } from 'react';
 import { AppRegistry, ScrollView, Image, Text } from 'react-native';
@@ -80,9 +80,9 @@ AppRegistry.registerComponent(
   () => IScrolledDownAndWhatHappenedNextShockedMe);
    -

    ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

    +

    ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

    A ScrollView with a single item can be used to allow the user to zoom content. Set up the maximumZoomScale and minimumZoomScale props and your user will be able to use pinch and expand gestures to zoom in and out.

    -

    The ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items than can fit on the screen, you should use a FlatList instead. So let's learn about list views next.

    +

    The ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items than can fit on the screen, you should use a FlatList instead. So let's learn about list views next.

    ← Handling TouchesUsing List Views →
    Edit

    Using a ScrollView

    The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).

    +
    Edit

    Using a ScrollView

    The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).

    This example creates a vertical ScrollView with both images and text mixed together.

    import React, { Component } from 'react';
 import { AppRegistry, ScrollView, Image, Text } from 'react-native';
@@ -80,9 +80,9 @@ AppRegistry.registerComponent(
   () => IScrolledDownAndWhatHappenedNextShockedMe);
    -

    ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

    +

    ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

    A ScrollView with a single item can be used to allow the user to zoom content. Set up the maximumZoomScale and minimumZoomScale props and your user will be able to use pinch and expand gestures to zoom in and out.

    -

    The ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items than can fit on the screen, you should use a FlatList instead. So let's learn about list views next.

    +

    The ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items than can fit on the screen, you should use a FlatList instead. So let's learn about list views next.

    ← Handling TouchesUsing List Views →
    Edit

    View Style Props

    Props

    Reference

    @@ -67,7 +67,7 @@ TypeRequired -colorNo +colorNo
    @@ -87,7 +87,7 @@ TypeRequired -colorNo +colorNo
    @@ -147,7 +147,7 @@ TypeRequired -colorNo +colorNo
    @@ -157,7 +157,7 @@ TypeRequired -colorNo +colorNo
    @@ -167,7 +167,7 @@ TypeRequired -colorNo +colorNo
    @@ -197,7 +197,7 @@ TypeRequired -colorNo +colorNo
    @@ -217,7 +217,7 @@ TypeRequired -colorNo +colorNo
    @@ -237,7 +237,7 @@ TypeRequired -colorNo +colorNo
    diff --git a/docs/view-style-props/index.html b/docs/view-style-props/index.html index ab7962ab55e..975bc4ed8ee 100644 --- a/docs/view-style-props/index.html +++ b/docs/view-style-props/index.html @@ -31,32 +31,32 @@ });
    Edit

    View Style Props

    Props

    Reference

    @@ -67,7 +67,7 @@ TypeRequired -colorNo +colorNo
    @@ -87,7 +87,7 @@ TypeRequired -colorNo +colorNo
    @@ -147,7 +147,7 @@ TypeRequired -colorNo +colorNo
    @@ -157,7 +157,7 @@ TypeRequired -colorNo +colorNo
    @@ -167,7 +167,7 @@ TypeRequired -colorNo +colorNo
    @@ -197,7 +197,7 @@ TypeRequired -colorNo +colorNo
    @@ -217,7 +217,7 @@ TypeRequired -colorNo +colorNo
    @@ -237,7 +237,7 @@ TypeRequired -colorNo +colorNo
    diff --git a/docs/view.html b/docs/view.html index 2b07109b087..222ea99c2ee 100644 --- a/docs/view.html +++ b/docs/view.html @@ -1,4 +1,4 @@ -View · React Native
    Edit

    View

    The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

    +
    Edit

    View

    The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

    View is designed to be nested inside other views and can have 0 to many children of any type.

    This example creates a View that wraps two colored boxes and a text component in a row with padding.

    class ViewColoredBoxesWithText extends Component {
@@ -50,7 +50,7 @@
 }
    -

    Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

    +

    Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

    Synthetic Touch Events

    For View responder props (e.g., onResponderMove), the synthetic touch event passed to them are of the following form:

    @@ -70,37 +70,37 @@

    Props

    Reference

    @@ -364,7 +364,7 @@ TypeRequired -view stylesNo +view stylesNo
    @@ -494,7 +494,7 @@
  • 'allowsDirectInteraction' - The element allows direct touch interaction for VoiceOver users.
  • 'pageTurn' - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
    • -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    @@ -506,7 +506,7 @@

    accessibilityViewIsModal

    A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is false.

    -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    TypeRequiredPlatform
    @@ -518,7 +518,7 @@

    accessibilityElementsHidden

    A value indicating whether the accessibility elements contained within this accessibility element are hidden. Default is false.

    -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    TypeRequiredPlatform
    diff --git a/docs/view/index.html b/docs/view/index.html index 2b07109b087..222ea99c2ee 100644 --- a/docs/view/index.html +++ b/docs/view/index.html @@ -1,4 +1,4 @@ -View · React Native
    Edit

    View

    The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

    +
    Edit

    View

    The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

    View is designed to be nested inside other views and can have 0 to many children of any type.

    This example creates a View that wraps two colored boxes and a text component in a row with padding.

    class ViewColoredBoxesWithText extends Component {
@@ -50,7 +50,7 @@
 }
    -

    Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

    +

    Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

    Synthetic Touch Events

    For View responder props (e.g., onResponderMove), the synthetic touch event passed to them are of the following form:

    @@ -70,37 +70,37 @@

    Props

    Reference

    @@ -364,7 +364,7 @@
    - +
    TypeRequiredPlatform
    TypeRequired
    view stylesNo
    view stylesNo
    @@ -494,7 +494,7 @@
  • 'allowsDirectInteraction' - The element allows direct touch interaction for VoiceOver users.
  • 'pageTurn' - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
    • -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    @@ -506,7 +506,7 @@

    accessibilityViewIsModal

    A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is false.

    -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    TypeRequiredPlatform
    @@ -518,7 +518,7 @@

    accessibilityElementsHidden

    A value indicating whether the accessibility elements contained within this accessibility element are hidden. Default is false.

    -

    See the Accessibility guide for more information.

    +

    See the Accessibility guide for more information.

    TypeRequiredPlatform
    diff --git a/docs/viewpagerandroid.html b/docs/viewpagerandroid.html index dc2186b5e7c..d481ff0bcaf 100644 --- a/docs/viewpagerandroid.html +++ b/docs/viewpagerandroid.html @@ -62,23 +62,23 @@ var styles = {

    Props

    Type Definitions

    Reference

    diff --git a/docs/viewpagerandroid/index.html b/docs/viewpagerandroid/index.html index dc2186b5e7c..d481ff0bcaf 100644 --- a/docs/viewpagerandroid/index.html +++ b/docs/viewpagerandroid/index.html @@ -62,23 +62,23 @@ var styles = {

    Props

    Type Definitions

    Reference

    diff --git a/docs/virtualizedlist.html b/docs/virtualizedlist.html index 16d08ee359d..0327c8145df 100644 --- a/docs/virtualizedlist.html +++ b/docs/virtualizedlist.html @@ -1,4 +1,4 @@ -VirtualizedList · React Native
    Edit

    VirtualizedList

    Base implementation for the more convenient <FlatList> and <SectionList> components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

    +
    Edit

    VirtualizedList

    Base implementation for the more convenient <FlatList> and <SectionList> components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

    Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.

    Some caveats:

      @@ -40,48 +40,48 @@

    Props

    Methods

    Reference

    @@ -196,7 +196,7 @@
    TypeRequiredPlatform

    CellRendererComponent

    -

    Each cell is rendered using this element. Can be a React Component Class,or a render function. Defaults to using View.

    +

    Each cell is rendered using this element. Can be a React Component Class,or a render function. Defaults to using View.

    diff --git a/docs/virtualizedlist/index.html b/docs/virtualizedlist/index.html index 16d08ee359d..0327c8145df 100644 --- a/docs/virtualizedlist/index.html +++ b/docs/virtualizedlist/index.html @@ -1,4 +1,4 @@ -VirtualizedList · React Native
    Edit

    VirtualizedList

    Base implementation for the more convenient <FlatList> and <SectionList> components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

    +
    Edit

    VirtualizedList

    Base implementation for the more convenient <FlatList> and <SectionList> components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

    Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.

    Some caveats:

      @@ -40,48 +40,48 @@

    Props

    Methods

    Reference

    @@ -196,7 +196,7 @@
    TypeRequired

    CellRendererComponent

    -

    Each cell is rendered using this element. Can be a React Component Class,or a render function. Defaults to using View.

    +

    Each cell is rendered using this element. Can be a React Component Class,or a render function. Defaults to using View.

    diff --git a/docs/webview.html b/docs/webview.html index f8722d71b04..c4202e74af7 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -50,51 +50,51 @@

    Props

    Methods

    Reference

    diff --git a/docs/webview/index.html b/docs/webview/index.html index f8722d71b04..c4202e74af7 100644 --- a/docs/webview/index.html +++ b/docs/webview/index.html @@ -50,51 +50,51 @@

    Props

    Methods

    Reference

    TypeRequired