diff --git a/docs/0.50/animated.html b/docs/0.50/animated.html index 139f21df615..a8d4c6a25fe 100644 --- a/docs/0.50/animated.html +++ b/docs/0.50/animated.html @@ -1,4 +1,4 @@ -Animated · React Native
Edit

Animated

The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

+
Edit

Animated

The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.

The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():

Animated.timing(
   // Animate value over time
@@ -90,7 +90,7 @@
 
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:

 
 
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.

@@ -100,7 +100,7 @@
 
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.

 
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.

 
Animatable components

-
Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.

+
Only animatable components can be animated. These unique 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.

 
@@ -119,7 +119,7 @@
 
  • Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.
    • 
 
  • Animated.stagger() starts animations in order and in parallel, but with successive delays.
    • 
 
-
    Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
    
+
    Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
    
 
    By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
    
 
    Combining animated values
    
 
    You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
    
@@ -213,14 +213,14 @@
 
    Animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
    
 
    Config is an object that may have the following options.
    
 
    Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
    
-
    The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
    
+
    The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
    
 
      
 
    • friction: Controls "bounciness"/overshoot. Default 7.
      • 
 
    • tension: Controls speed. Default 40.
      • 
 
    • speed: Controls speed of the animation. Default 12.
      • 
 
    • bounciness: Controls bounciness. Default 8.
      • 
 
    
-
    Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
    
+
    Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
    
 
      
 
    • stiffness: The spring stiffness coefficient. Default 100.
      • 
 
    • damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.
      • 
diff --git a/docs/0.50/animated/index.html b/docs/0.50/animated/index.html
index 139f21df615..a8d4c6a25fe 100644
--- a/docs/0.50/animated/index.html
+++ b/docs/0.50/animated/index.html
@@ -1,4 +1,4 @@
-Animated · React Native
    Edit

    Animated

    The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

    +
    Edit

    Animated

    The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.

    The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():

    Animated.timing(
   // Animate value over time
@@ -90,7 +90,7 @@
 
    Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
    
 
 
    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.
    
@@ -100,7 +100,7 @@
 
    By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
    
 
    You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
    
 
    Animatable components
    
-
    Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
    
+
    Only animatable components can be animated. These unique 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.
    
 
@@ -119,7 +119,7 @@
 
  • Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.
    • 
 
  • Animated.stagger() starts animations in order and in parallel, but with successive delays.
    • 
 
-
    Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
    
+
    Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
    
 
    By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
    
 
    Combining animated values
    
 
    You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
    
@@ -213,14 +213,14 @@
 
    Animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
    
 
    Config is an object that may have the following options.
    
 
    Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
    
-
    The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
    
+
    The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
    
 
      
 
    • friction: Controls "bounciness"/overshoot. Default 7.
      • 
 
    • tension: Controls speed. Default 40.
      • 
 
    • speed: Controls speed of the animation. Default 12.
      • 
 
    • bounciness: Controls bounciness. Default 8.
      • 
 
    
-
    Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
    
+
    Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
    
 
      
 
    • stiffness: The spring stiffness coefficient. Default 100.
      • 
 
    • damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.
      • 
diff --git a/docs/0.50/flatlist.html b/docs/0.50/flatlist.html
index a217cc7ad2d..361588055e9 100644
--- a/docs/0.50/flatlist.html
+++ b/docs/0.50/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native
    Edit

    FlatList

    A performant interface for rendering simple, flat lists, supporting the most handy features:

    +
    Edit

    FlatList

    A performant interface for rendering, flat lists, supporting the most handy features:

    • Fully cross-platform.
    • Optional horizontal mode.
      • diff --git a/docs/0.50/flatlist/index.html b/docs/0.50/flatlist/index.html index a217cc7ad2d..361588055e9 100644 --- a/docs/0.50/flatlist/index.html +++ b/docs/0.50/flatlist/index.html @@ -1,4 +1,4 @@ -FlatList · React Native
    Edit

    FlatList

    A performant interface for rendering simple, flat lists, supporting the most handy features:

    +
    Edit

    FlatList

    A performant interface for rendering, flat lists, supporting the most handy features:

    • Fully cross-platform.
    • Optional horizontal mode.
      • diff --git a/docs/0.50/safeareaview.html b/docs/0.50/safeareaview.html index f6b2a6cd87e..e92d38b0281 100644 --- a/docs/0.50/safeareaview.html +++ b/docs/0.50/safeareaview.html @@ -71,7 +71,7 @@
    Edit

    SafeAreaView

    The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

    SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

    Usage Example

    -

    Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

    +

    Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

    <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.50/safeareaview/index.html b/docs/0.50/safeareaview/index.html
index f6b2a6cd87e..e92d38b0281 100644
--- a/docs/0.50/safeareaview/index.html
+++ b/docs/0.50/safeareaview/index.html
@@ -71,7 +71,7 @@
    Edit

    SafeAreaView

    The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

    SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

    Usage Example

    -

    Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

    +

    Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

    <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.50/scrollview.html b/docs/0.50/scrollview.html
index dad607ebb4e..4878fda8b81 100644
--- a/docs/0.50/scrollview.html
+++ b/docs/0.50/scrollview.html
@@ -69,12 +69,12 @@
               }
             });
    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.

    +

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

    +

    ScrollView renders all its react child components at once, but 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, 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

      @@ -557,8 +557,8 @@ const styles = StyleSheet.create({

      The style of the scroll indicators.

      • 'default' (the default), same as black.
        • -
      • 'black', scroll indicator is black. This style is good against a light background.
        • -
      • 'white', scroll indicator is white. This style is good against a dark background.
        • +
      • 'black', scroll indicator is black. This style is good against a light background.
        • +
      • 'white', scroll indicator is white. This style is good against a dark background.
      diff --git a/docs/0.50/scrollview/index.html b/docs/0.50/scrollview/index.html index dad607ebb4e..4878fda8b81 100644 --- a/docs/0.50/scrollview/index.html +++ b/docs/0.50/scrollview/index.html @@ -69,12 +69,12 @@ } });
      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.

      +

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

      +

      ScrollView renders all its react child components at once, but 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, 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

        @@ -557,8 +557,8 @@ const styles = StyleSheet.create({

        The style of the scroll indicators.

        • 'default' (the default), same as black.
          • -
        • 'black', scroll indicator is black. This style is good against a light background.
          • -
        • 'white', scroll indicator is white. This style is good against a dark background.
          • +
        • 'black', scroll indicator is black. This style is good against a light background.
          • +
        • 'white', scroll indicator is white. This style is good against a dark background.
      diff --git a/docs/0.50/sectionlist.html b/docs/0.50/sectionlist.html index 250b82bfe8c..b299c2200f7 100644 --- a/docs/0.50/sectionlist.html +++ b/docs/0.50/sectionlist.html @@ -82,7 +82,7 @@
    • Scroll loading.

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

      -

      Simple Examples:

      +

      Examples:

      <SectionList
   renderItem={({item}) => <ListItem title={item} />}
   renderSectionHeader={({section}) => <Header title={section.title} />}
diff --git a/docs/0.50/sectionlist/index.html b/docs/0.50/sectionlist/index.html
index 250b82bfe8c..b299c2200f7 100644
--- a/docs/0.50/sectionlist/index.html
+++ b/docs/0.50/sectionlist/index.html
@@ -82,7 +82,7 @@
 
    • Scroll loading.
      • 
 
 
      If you don't need section support and want a simpler interface, use <FlatList>.
      
-
      Simple Examples:
      
+
      Examples:
      
 
      <SectionList
   renderItem={({item}) => <ListItem title={item} />}
   renderSectionHeader={({section}) => <Header title={section.title} />}
diff --git a/docs/0.50/text.html b/docs/0.50/text.html
index df8fe6387fd..928b522c639 100644
--- a/docs/0.50/text.html
+++ b/docs/0.50/text.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
 
      In order to use this feature, you must give the view a width and a height.
      
 
 
      Containers
      
-
      The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
      
+
      The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
      
 
      <Text>
   <Text>First part and </Text>
   <Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
   <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
 </View>
 
      
-
      Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
      
+
      Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
      
 
      class MyAppHeaderText extends Component {
   render() {
     <MyAppText>
diff --git a/docs/0.50/text/index.html b/docs/0.50/text/index.html
index df8fe6387fd..928b522c639 100644
--- a/docs/0.50/text/index.html
+++ b/docs/0.50/text/index.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
 
      In order to use this feature, you must give the view a width and a height.
      
 
 
      Containers
      
-
      The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
      
+
      The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
      
 
      <Text>
   <Text>First part and </Text>
   <Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
   <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
 </View>
 
      
-
      Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
      
+
      Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
      
 
      class MyAppHeaderText extends Component {
   render() {
     <MyAppText>
diff --git a/docs/0.50/textinput.html b/docs/0.50/textinput.html
index 2052f8860b3..4d04819348c 100644
--- a/docs/0.50/textinput.html
+++ b/docs/0.50/textinput.html
@@ -69,7 +69,7 @@
               }
             });
         
      Edit
      TextInput
      A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
      
-
      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:
      
+
      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A minimal example:

      defaultValue

      -

      Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      +

      Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      @@ -604,7 +604,7 @@ AppRegistry.registerComponent(
      TypeRequired

      value

      -

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      +

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      diff --git a/docs/0.50/textinput/index.html b/docs/0.50/textinput/index.html index 2052f8860b3..4d04819348c 100644 --- a/docs/0.50/textinput/index.html +++ b/docs/0.50/textinput/index.html @@ -69,7 +69,7 @@ } });
      Edit

      TextInput

      A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

      -

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:

      +

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A minimal example:

      TypeRequired

      defaultValue

      -

      Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      +

      Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      @@ -604,7 +604,7 @@ AppRegistry.registerComponent(
      TypeRequired

      value

      -

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      +

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      diff --git a/docs/0.51/safeareaview.html b/docs/0.51/safeareaview.html index 4243b89850d..306735cbe6f 100644 --- a/docs/0.51/safeareaview.html +++ b/docs/0.51/safeareaview.html @@ -71,7 +71,7 @@
      Edit

      SafeAreaView

      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

      Usage Example

      -

      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      +

      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.51/safeareaview/index.html b/docs/0.51/safeareaview/index.html
index 4243b89850d..306735cbe6f 100644
--- a/docs/0.51/safeareaview/index.html
+++ b/docs/0.51/safeareaview/index.html
@@ -71,7 +71,7 @@
      Edit

      SafeAreaView

      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

      Usage Example

      -

      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      +

      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.52/safeareaview.html b/docs/0.52/safeareaview.html
index d3b2fcbeff0..45039c1dd45 100644
--- a/docs/0.52/safeareaview.html
+++ b/docs/0.52/safeareaview.html
@@ -71,7 +71,7 @@
      Edit

      SafeAreaView

      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

      Usage Example

      -

      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      +

      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.52/safeareaview/index.html b/docs/0.52/safeareaview/index.html
index d3b2fcbeff0..45039c1dd45 100644
--- a/docs/0.52/safeareaview/index.html
+++ b/docs/0.52/safeareaview/index.html
@@ -71,7 +71,7 @@
      Edit

      SafeAreaView

      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

      Usage Example

      -

      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      +

      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.53/appstate.html b/docs/0.53/appstate.html
index 17f77c6fb9c..9a61efac1ac 100644
--- a/docs/0.53/appstate.html
+++ b/docs/0.53/appstate.html
@@ -134,7 +134,7 @@
 
      addEventListener(type, handler);
 
      
 
      Add a handler to AppState changes by listening to the change event type and providing the handler
      
-
      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
      
+
      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
      
 
      
 
      removeEventListener()
      
 
      removeEventListener(type, handler);
diff --git a/docs/0.53/appstate/index.html b/docs/0.53/appstate/index.html
index 17f77c6fb9c..9a61efac1ac 100644
--- a/docs/0.53/appstate/index.html
+++ b/docs/0.53/appstate/index.html
@@ -134,7 +134,7 @@
 
      addEventListener(type, handler);
 
      
 
      Add a handler to AppState changes by listening to the change event type and providing the handler
      
-
      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
      
+
      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
      
 
      
 
      removeEventListener()
      
 
      removeEventListener(type, handler);
diff --git a/docs/0.53/safeareaview.html b/docs/0.53/safeareaview.html
index af8ede11dae..85558079781 100644
--- a/docs/0.53/safeareaview.html
+++ b/docs/0.53/safeareaview.html
@@ -71,7 +71,7 @@
      Edit

      SafeAreaView

      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

      Usage Example

      -

      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      +

      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.53/safeareaview/index.html b/docs/0.53/safeareaview/index.html
index af8ede11dae..85558079781 100644
--- a/docs/0.53/safeareaview/index.html
+++ b/docs/0.53/safeareaview/index.html
@@ -71,7 +71,7 @@
      Edit

      SafeAreaView

      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.

      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

      Usage Example

      -

      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      +

      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.53/scrollview.html b/docs/0.53/scrollview.html
index acefa3a5a7f..e8da0cfbe91 100644
--- a/docs/0.53/scrollview.html
+++ b/docs/0.53/scrollview.html
@@ -69,12 +69,12 @@
               }
             });
      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.

      +

      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 painless 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 simply renders all its react child components at once. That makes it very easy to understand and use.

      +

      ScrollView renders all its react child components at once. That makes it uncomplicated 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.

      +

      This is where FlatList comes into play. FlatList renders items lazily, 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

        @@ -544,8 +544,8 @@ const styles = StyleSheet.create({

        The style of the scroll indicators.

        • 'default' (the default), same as black.
          • -
        • 'black', scroll indicator is black. This style is good against a light background.
          • -
        • 'white', scroll indicator is white. This style is good against a dark background.
          • +
        • 'black', scroll indicator is dark. This style is good against a light background.
          • +
        • 'white', scroll indicator is light. This style is good against a dark background.
      TypeRequired
      diff --git a/docs/0.53/scrollview/index.html b/docs/0.53/scrollview/index.html index acefa3a5a7f..e8da0cfbe91 100644 --- a/docs/0.53/scrollview/index.html +++ b/docs/0.53/scrollview/index.html @@ -69,12 +69,12 @@ } });
      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.

      +

      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 painless 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 simply renders all its react child components at once. That makes it very easy to understand and use.

      +

      ScrollView renders all its react child components at once. That makes it uncomplicated 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.

      +

      This is where FlatList comes into play. FlatList renders items lazily, 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

        @@ -544,8 +544,8 @@ const styles = StyleSheet.create({

        The style of the scroll indicators.

        • 'default' (the default), same as black.
          • -
        • 'black', scroll indicator is black. This style is good against a light background.
          • -
        • 'white', scroll indicator is white. This style is good against a dark background.
          • +
        • 'black', scroll indicator is dark. This style is good against a light background.
          • +
        • 'white', scroll indicator is light. This style is good against a dark background.
      diff --git a/docs/0.53/textinput.html b/docs/0.53/textinput.html index 3bda98ef94a..a4eef23dcfb 100644 --- a/docs/0.53/textinput.html +++ b/docs/0.53/textinput.html @@ -69,7 +69,7 @@ } });
      Edit

      TextInput

      A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

      -

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:

      +

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. An example:

      defaultValue

      -

      Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      +

      Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      @@ -644,7 +644,7 @@ AppRegistry.registerComponent(
      TypeRequired

      value

      -

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      +

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      diff --git a/docs/0.53/textinput/index.html b/docs/0.53/textinput/index.html index 3bda98ef94a..a4eef23dcfb 100644 --- a/docs/0.53/textinput/index.html +++ b/docs/0.53/textinput/index.html @@ -69,7 +69,7 @@ } });
      Edit

      TextInput

      A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

      -

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:

      +

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. An example:

      TypeRequired

      defaultValue

      -

      Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      +

      Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      @@ -644,7 +644,7 @@ AppRegistry.registerComponent(
      TypeRequired

      value

      -

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      +

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      diff --git a/docs/0.54/appstate.html b/docs/0.54/appstate.html index 3dd38a50c99..ded4c0fbb7d 100644 --- a/docs/0.54/appstate.html +++ b/docs/0.54/appstate.html @@ -133,7 +133,7 @@ 
      addEventListener(type, handler);

      Add a handler to AppState changes by listening to the change event type and providing the handler

      -

      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).

      +

      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).

      removeEventListener()

      removeEventListener(type, handler);
diff --git a/docs/0.54/appstate/index.html b/docs/0.54/appstate/index.html
index 3dd38a50c99..ded4c0fbb7d 100644
--- a/docs/0.54/appstate/index.html
+++ b/docs/0.54/appstate/index.html
@@ -133,7 +133,7 @@
 
      addEventListener(type, handler);
 
      
 
      Add a handler to AppState changes by listening to the change event type and providing the handler
      
-
      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
      
+
      TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
      
 
      
 
      removeEventListener()
      
 
      removeEventListener(type, handler);
diff --git a/docs/0.54/flatlist.html b/docs/0.54/flatlist.html
index 73f5e97c8e6..c2b8fd732c2 100644
--- a/docs/0.54/flatlist.html
+++ b/docs/0.54/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native
      Edit
      FlatList
      A performant interface for rendering simple, flat lists, supporting the most handy features:
      
+        
      Edit
      FlatList
      A performant interface for rendering basic, flat lists, supporting the most handy features:
      
 
        
 
      • Fully cross-platform.
        • 
 
      • Optional horizontal mode.
        • 
@@ -231,7 +231,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 a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
      TypeRequired
      @@ -310,7 +310,7 @@ class MultiSelectList extends React.PureComponent {

      getItemLayout

      (data, index) => {length: number, offset: number, index: number}
      -

      getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:

      +

      getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is handy if you have fixed height items, for example:

        getItemLayout={(data, index) => (
     {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
   )}
diff --git a/docs/0.54/flatlist/index.html b/docs/0.54/flatlist/index.html
index 73f5e97c8e6..c2b8fd732c2 100644
--- a/docs/0.54/flatlist/index.html
+++ b/docs/0.54/flatlist/index.html
@@ -1,4 +1,4 @@
-FlatList · React Native
      Edit
      FlatList
      A performant interface for rendering simple, flat lists, supporting the most handy features:
      
+        
      Edit
      FlatList
      A performant interface for rendering basic, flat lists, supporting the most handy features:
      
 
        
 
      • Fully cross-platform.
        • 
 
      • Optional horizontal mode.
        • 
@@ -231,7 +231,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 a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.

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

      getItemLayout

      (data, index) => {length: number, offset: number, index: number}
      -

      getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:

      +

      getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is handy if you have fixed height items, for example:

        getItemLayout={(data, index) => (
     {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
   )}
diff --git a/docs/0.54/modal.html b/docs/0.54/modal.html
index f04c75d1ea1..3717d566b9a 100644
--- a/docs/0.54/modal.html
+++ b/docs/0.54/modal.html
@@ -1,4 +1,4 @@
-Modal · React Native
      Edit
      Modal
      The Modal component is a simple way to present content above an enclosing view.
      
+        
      Edit
      Modal
      The Modal component is a basic way to present content above an enclosing view.
      
 
      
 
      Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
      
 
      
diff --git a/docs/0.54/modal/index.html b/docs/0.54/modal/index.html
index f04c75d1ea1..3717d566b9a 100644
--- a/docs/0.54/modal/index.html
+++ b/docs/0.54/modal/index.html
@@ -1,4 +1,4 @@
-Modal · React Native
      Edit
      Modal
      The Modal component is a simple way to present content above an enclosing view.
      
+        
      Edit
      Modal
      The Modal component is a basic way to present content above an enclosing view.
      
 
      
 
      Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
      
 
      
diff --git a/docs/0.54/safeareaview.html b/docs/0.54/safeareaview.html
index 95896283816..473380b6932 100644
--- a/docs/0.54/safeareaview.html
+++ b/docs/0.54/safeareaview.html
@@ -71,7 +71,7 @@
         
      Edit
      SafeAreaView
      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
      
 
      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
      
 
      Usage Example
      
-
      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
+
      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
 
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.54/safeareaview/index.html b/docs/0.54/safeareaview/index.html
index 95896283816..473380b6932 100644
--- a/docs/0.54/safeareaview/index.html
+++ b/docs/0.54/safeareaview/index.html
@@ -71,7 +71,7 @@
         
      Edit
      SafeAreaView
      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
      
 
      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
      
 
      Usage Example
      
-
      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
+
      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
 
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.54/scrollview.html b/docs/0.54/scrollview.html
index d27d7f25343..a955d65e7c2 100644
--- a/docs/0.54/scrollview.html
+++ b/docs/0.54/scrollview.html
@@ -69,12 +69,12 @@
               }
             });
         
      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.
      
+
      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 painless 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 simply renders all its react child components at once. That makes it very easy to understand and use.
      
+
      ScrollView renders all its react child components at once. That makes it uncomplicated 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.
      
+
      This is where FlatList comes into play. FlatList renders items lazily, 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
      
 
        
@@ -544,8 +544,8 @@ const styles = StyleSheet.create({
 
        The style of the scroll indicators.
        
 
          
 
        • 'default' (the default), same as black.
          • 
-
        • 'black', scroll indicator is black. This style is good against a light background.
          • 
-
        • 'white', scroll indicator is white. This style is good against a dark background.
          • 
+
        • 'black', scroll indicator is dark. This style is good against a light background.
          • 
+
        • 'white', scroll indicator is light. This style is good against a dark background.
          •
      TypeRequired
      diff --git a/docs/0.54/scrollview/index.html b/docs/0.54/scrollview/index.html index d27d7f25343..a955d65e7c2 100644 --- a/docs/0.54/scrollview/index.html +++ b/docs/0.54/scrollview/index.html @@ -69,12 +69,12 @@ } });
      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.

      +

      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 painless 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 simply renders all its react child components at once. That makes it very easy to understand and use.

      +

      ScrollView renders all its react child components at once. That makes it uncomplicated 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.

      +

      This is where FlatList comes into play. FlatList renders items lazily, 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

        @@ -544,8 +544,8 @@ const styles = StyleSheet.create({

        The style of the scroll indicators.

        • 'default' (the default), same as black.
          • -
        • 'black', scroll indicator is black. This style is good against a light background.
          • -
        • 'white', scroll indicator is white. This style is good against a dark background.
          • +
        • 'black', scroll indicator is dark. This style is good against a light background.
          • +
        • 'white', scroll indicator is light. This style is good against a dark background.
      diff --git a/docs/0.54/sectionlist.html b/docs/0.54/sectionlist.html index 9459b44d407..b9ad0ba9f18 100644 --- a/docs/0.54/sectionlist.html +++ b/docs/0.54/sectionlist.html @@ -82,7 +82,6 @@
    • Scroll loading.

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

      -

      Simple Examples:

      <SectionList
   renderItem={({item}) => <ListItem title={item} />}
   renderSectionHeader={({section}) => <Header title={section.title} />}
diff --git a/docs/0.54/sectionlist/index.html b/docs/0.54/sectionlist/index.html
index 9459b44d407..b9ad0ba9f18 100644
--- a/docs/0.54/sectionlist/index.html
+++ b/docs/0.54/sectionlist/index.html
@@ -82,7 +82,6 @@
 
    • Scroll loading.
      • 
 
 
      If you don't need section support and want a simpler interface, use FlatList.
      
-
      Simple Examples:
      
 
      <SectionList
   renderItem={({item}) => <ListItem title={item} />}
   renderSectionHeader={({section}) => <Header title={section.title} />}
diff --git a/docs/0.54/textinput.html b/docs/0.54/textinput.html
index 81c6eed3c0f..d6a55cdbae0 100644
--- a/docs/0.54/textinput.html
+++ b/docs/0.54/textinput.html
@@ -69,7 +69,7 @@
               }
             });
         
      Edit
      TextInput
      A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
      
-
      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:
      
+
      The most basic use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A minimal example:

      defaultValue

      -

      Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      +

      Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      @@ -644,7 +644,7 @@ AppRegistry.registerComponent(
      TypeRequired

      value

      -

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      +

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      diff --git a/docs/0.54/textinput/index.html b/docs/0.54/textinput/index.html index 81c6eed3c0f..d6a55cdbae0 100644 --- a/docs/0.54/textinput/index.html +++ b/docs/0.54/textinput/index.html @@ -69,7 +69,7 @@ } });
      Edit

      TextInput

      A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

      -

      The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:

      +

      The most basic use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A minimal example:

      TypeRequired

      defaultValue

      -

      Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      +

      Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

      @@ -644,7 +644,7 @@ AppRegistry.registerComponent(
      TypeRequired

      value

      -

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      +

      The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

      diff --git a/docs/0.54/vibration.html b/docs/0.54/vibration.html index d2bf9552fc5..269a7ff1b06 100644 --- a/docs/0.54/vibration.html +++ b/docs/0.54/vibration.html @@ -72,7 +72,7 @@

      There will be no effect on devices that do not support Vibration, eg. the simulator.

      Note for Android: add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml

      Since the vibration duration in iOS is not configurable, so there are some differences with Android. In Android, if pattern is a number, it specifies the vibration duration in ms. If pattern is an array, those odd indices are the vibration duration, while the even ones are the separation time.

      -

      In iOS, invoking vibrate(duration) will just ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.

      +

      In iOS, invoking vibrate(duration) will ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.

      Repeatable vibration is also supported, the vibration will repeat with defined pattern until cancel() is called.

      Example:

      const DURATION = 10000
diff --git a/docs/0.54/vibration/index.html b/docs/0.54/vibration/index.html
index d2bf9552fc5..269a7ff1b06 100644
--- a/docs/0.54/vibration/index.html
+++ b/docs/0.54/vibration/index.html
@@ -72,7 +72,7 @@
 
      There will be no effect on devices that do not support Vibration, eg. the simulator.
      
 
      Note for Android: add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml
      
 
      Since the vibration duration in iOS is not configurable, so there are some differences with Android. In Android, if pattern is a number, it specifies the vibration duration in ms. If pattern is an array, those odd indices are the vibration duration, while the even ones are the separation time.
      
-
      In iOS, invoking vibrate(duration) will just ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.
      
+
      In iOS, invoking vibrate(duration) will ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.
      
 
      Repeatable vibration is also supported, the vibration will repeat with defined pattern until cancel() is called.
      
 
      Example:
      
 
      const DURATION = 10000
diff --git a/docs/0.55/safeareaview.html b/docs/0.55/safeareaview.html
index 7cffbd91084..8702f29c42d 100644
--- a/docs/0.55/safeareaview.html
+++ b/docs/0.55/safeareaview.html
@@ -71,7 +71,7 @@
         
      Edit
      SafeAreaView
      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
      
 
      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
      
 
      Usage Example
      
-
      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
+
      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
 
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.55/safeareaview/index.html b/docs/0.55/safeareaview/index.html
index 7cffbd91084..8702f29c42d 100644
--- a/docs/0.55/safeareaview/index.html
+++ b/docs/0.55/safeareaview/index.html
@@ -71,7 +71,7 @@
         
      Edit
      SafeAreaView
      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
      
 
      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
      
 
      Usage Example
      
-
      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
+
      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
 
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.55/scrollview.html b/docs/0.55/scrollview.html
index eba65f4cad2..5f32cf02db6 100644
--- a/docs/0.55/scrollview.html
+++ b/docs/0.55/scrollview.html
@@ -69,12 +69,12 @@
               }
             });
         
      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.
      
+
      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 painless 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 simply renders all its react child components at once. That makes it very easy to understand and use.
      
+
      ScrollView renders all its react child components at once. That makes it uncomplicated 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.
      
+
      This is where FlatList comes into play. FlatList renders items lazily, 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
      
 
        
@@ -544,8 +544,8 @@ const styles = StyleSheet.create({
 
        The style of the scroll indicators.
        
 
          
 
        • 'default' (the default), same as black.
          • 
-
        • 'black', scroll indicator is black. This style is good against a light background.
          • 
-
        • 'white', scroll indicator is white. This style is good against a dark background.
          • 
+
        • 'black', scroll indicator is dark. This style is good against a light background.
          • 
+
        • 'white', scroll indicator is light. This style is good against a dark background.
          •
      TypeRequired
      diff --git a/docs/0.55/scrollview/index.html b/docs/0.55/scrollview/index.html index eba65f4cad2..5f32cf02db6 100644 --- a/docs/0.55/scrollview/index.html +++ b/docs/0.55/scrollview/index.html @@ -69,12 +69,12 @@ } });
      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.

      +

      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 painless 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 simply renders all its react child components at once. That makes it very easy to understand and use.

      +

      ScrollView renders all its react child components at once. That makes it uncomplicated 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.

      +

      This is where FlatList comes into play. FlatList renders items lazily, 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

        @@ -544,8 +544,8 @@ const styles = StyleSheet.create({

        The style of the scroll indicators.

        • 'default' (the default), same as black.
          • -
        • 'black', scroll indicator is black. This style is good against a light background.
          • -
        • 'white', scroll indicator is white. This style is good against a dark background.
          • +
        • 'black', scroll indicator is dark. This style is good against a light background.
          • +
        • 'white', scroll indicator is light. This style is good against a dark background.
      diff --git a/docs/0.55/vibration.html b/docs/0.55/vibration.html index a3cf2150851..e726ac582ca 100644 --- a/docs/0.55/vibration.html +++ b/docs/0.55/vibration.html @@ -72,7 +72,7 @@

      There will be no effect on devices that do not support Vibration, eg. the simulator.

      Note for Android: add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml

      Since the vibration duration in iOS is not configurable, so there are some differences with Android. In Android, if pattern is a number, it specifies the vibration duration in ms. If pattern is an array, those odd indices are the vibration duration, while the even ones are the separation time.

      -

      In iOS, invoking vibrate(duration) will just ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.

      +

      In iOS, invoking vibrate(duration) will ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.

      Repeatable vibration is also supported, the vibration will repeat with defined pattern until cancel() is called.

      Example:

      const DURATION = 10000
diff --git a/docs/0.55/vibration/index.html b/docs/0.55/vibration/index.html
index a3cf2150851..e726ac582ca 100644
--- a/docs/0.55/vibration/index.html
+++ b/docs/0.55/vibration/index.html
@@ -72,7 +72,7 @@
 
      There will be no effect on devices that do not support Vibration, eg. the simulator.
      
 
      Note for Android: add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml
      
 
      Since the vibration duration in iOS is not configurable, so there are some differences with Android. In Android, if pattern is a number, it specifies the vibration duration in ms. If pattern is an array, those odd indices are the vibration duration, while the even ones are the separation time.
      
-
      In iOS, invoking vibrate(duration) will just ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.
      
+
      In iOS, invoking vibrate(duration) will ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.
      
 
      Repeatable vibration is also supported, the vibration will repeat with defined pattern until cancel() is called.
      
 
      Example:
      
 
      const DURATION = 10000
diff --git a/docs/0.56/safeareaview.html b/docs/0.56/safeareaview.html
index e1e506835f5..8816eb1c115 100644
--- a/docs/0.56/safeareaview.html
+++ b/docs/0.56/safeareaview.html
@@ -71,7 +71,7 @@
         
      Edit
      SafeAreaView
      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
      
 
      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
      
 
      Usage Example
      
-
      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
+
      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
 
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
diff --git a/docs/0.56/safeareaview/index.html b/docs/0.56/safeareaview/index.html
index e1e506835f5..8816eb1c115 100644
--- a/docs/0.56/safeareaview/index.html
+++ b/docs/0.56/safeareaview/index.html
@@ -71,7 +71,7 @@
         
      Edit
      SafeAreaView
      The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
      
 
      SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
      
 
      Usage Example
      
-
      Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
+
      Wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.
      
 
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>