diff --git a/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile.html b/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile.html index 5102092c158..b832c3593de 100644 --- a/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile.html +++ b/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile.html @@ -77,7 +77,7 @@

This is an excerpt. Read the rest of the post on Facebook Code.

-
Recent Posts

Expo Talks: Adam on Unraveling Navigation

Héctor Ramos

Adam Miskiewicz from Expo talks about mobile navigation and the ex-navigation React Native library at Expo's office hours last week.

-

Expo Talks: Adam on Unraveling Navigation

Héctor Ramos

Adam Miskiewicz from Expo talks about mobile navigation and the ex-navigation React Native library at Expo's office hours last week.

-
Edit

StatusBar

Component to control the app status bar.

Usage with Navigator

It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.

-
<View>
-  <StatusBar backgroundColor="blue" barStyle="light-content" />
-  <View>
-    <StatusBar hidden={route.statusBarHidden} />
-    ...
-  </View>
-</View>
+
<View>
+  <StatusBar backgroundColor="blue" barStyle="light-content" />
+  <View>
+    <StatusBar hidden={route.statusBarHidden} />
+    ...
+  </View>
+</View>
 

Imperative API

For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render.

diff --git a/docs/0.58/statusbar/index.html b/docs/0.58/statusbar/index.html index 9e3d25fa2c5..39ed63c82ff 100644 --- a/docs/0.58/statusbar/index.html +++ b/docs/0.58/statusbar/index.html @@ -71,13 +71,13 @@
Edit

StatusBar

Component to control the app status bar.

Usage with Navigator

It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.

-
<View>
-  <StatusBar backgroundColor="blue" barStyle="light-content" />
-  <View>
-    <StatusBar hidden={route.statusBarHidden} />
-    ...
-  </View>
-</View>
+
<View>
+  <StatusBar backgroundColor="blue" barStyle="light-content" />
+  <View>
+    <StatusBar hidden={route.statusBarHidden} />
+    ...
+  </View>
+</View>
 

Imperative API

For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render.

diff --git a/docs/0.58/stylesheet.html b/docs/0.58/stylesheet.html index ca84681b084..2afd3797823 100644 --- a/docs/0.58/stylesheet.html +++ b/docs/0.58/stylesheet.html @@ -86,9 +86,9 @@ });

Use a StyleSheet:

-
<View style={styles.container}>
-  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
-</View>
+
<View style={styles.container}>
+  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
+</View>
 

Code quality:

    diff --git a/docs/0.58/stylesheet/index.html b/docs/0.58/stylesheet/index.html index ca84681b084..2afd3797823 100644 --- a/docs/0.58/stylesheet/index.html +++ b/docs/0.58/stylesheet/index.html @@ -86,9 +86,9 @@ });

Use a StyleSheet:

-
<View style={styles.container}>
-  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
-</View>
+
<View style={styles.container}>
+  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
+</View>
 

Code quality:

    diff --git a/docs/0.58/text.html b/docs/0.58/text.html index e1e017fbf69..a33faa4d1d6 100644 --- a/docs/0.58/text.html +++ b/docs/0.58/text.html @@ -166,10 +166,10 @@ AppRegistry.registerComponent('AwesomeProject',

Containers

The <Text> element is particular 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>
-</Text>
+
<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
 // Text container: the text will be inline if the space allowed it
 // |First part and second part|
 
@@ -178,10 +178,10 @@ AppRegistry.registerComponent('AwesomeProject',
 // |and second |
 // |part       |
 
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
 // View container: each text is its own block
 // |First part and|
 // |second part   |
@@ -202,42 +202,42 @@ AppRegistry.registerComponent('AwesomeProject',
 

All elements in the document will inherit this font unless they or one of their parents specifies a new rule.

In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>.

// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
+<View>
   Some text
-</View>
+</View>
 
 // GOOD
-<View>
-  <Text>
+<View>
+  <Text>
     Some text
-  </Text>
-</View>
+  </Text>
+</View>
 

You also lose the ability to set up a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.

-
<View>
-  <MyAppText>
-    Text styled with the default font for the entire application
-  </MyAppText>
-  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
-</View>
+
<View>
+  <MyAppText>
+    Text styled with the default font for the entire application
+  </MyAppText>
+  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
+</View>
 

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() {
     return (
-      <MyAppText>
-        <Text style={{fontSize: 20}}>{this.props.children}</Text>
-      </MyAppText>
+      <MyAppText>
+        <Text style={{fontSize: 20}}>{this.props.children}</Text>
+      </MyAppText>
     );
   }
 }
 

Composing MyAppText in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.

React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

-
<Text style={{fontWeight: 'bold'}}>
-  I am bold
-  <Text style={{color: 'red'}}>and red</Text>
-</Text>
+
<Text style={{fontWeight: 'bold'}}>
+  I am bold
+  <Text style={{color: 'red'}}>and red</Text>
+</Text>
 

We believe that this more constrained way to style text will yield better apps:

    diff --git a/docs/0.58/text/index.html b/docs/0.58/text/index.html index e1e017fbf69..a33faa4d1d6 100644 --- a/docs/0.58/text/index.html +++ b/docs/0.58/text/index.html @@ -166,10 +166,10 @@ AppRegistry.registerComponent('AwesomeProject',

Containers

The <Text> element is particular 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>
-</Text>
+
<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
 // Text container: the text will be inline if the space allowed it
 // |First part and second part|
 
@@ -178,10 +178,10 @@ AppRegistry.registerComponent('AwesomeProject',
 // |and second |
 // |part       |
 
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
 // View container: each text is its own block
 // |First part and|
 // |second part   |
@@ -202,42 +202,42 @@ AppRegistry.registerComponent('AwesomeProject',
 

All elements in the document will inherit this font unless they or one of their parents specifies a new rule.

In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>.

// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
+<View>
   Some text
-</View>
+</View>
 
 // GOOD
-<View>
-  <Text>
+<View>
+  <Text>
     Some text
-  </Text>
-</View>
+  </Text>
+</View>
 

You also lose the ability to set up a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.

-
<View>
-  <MyAppText>
-    Text styled with the default font for the entire application
-  </MyAppText>
-  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
-</View>
+
<View>
+  <MyAppText>
+    Text styled with the default font for the entire application
+  </MyAppText>
+  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
+</View>
 

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() {
     return (
-      <MyAppText>
-        <Text style={{fontSize: 20}}>{this.props.children}</Text>
-      </MyAppText>
+      <MyAppText>
+        <Text style={{fontSize: 20}}>{this.props.children}</Text>
+      </MyAppText>
     );
   }
 }
 

Composing MyAppText in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.

React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

-
<Text style={{fontWeight: 'bold'}}>
-  I am bold
-  <Text style={{color: 'red'}}>and red</Text>
-</Text>
+
<Text style={{fontWeight: 'bold'}}>
+  I am bold
+  <Text style={{color: 'red'}}>and red</Text>
+</Text>
 

We believe that this more constrained way to style text will yield better apps:

    diff --git a/docs/0.58/toastandroid.html b/docs/0.58/toastandroid.html index 977e9513fe4..f0fac97ac89 100644 --- a/docs/0.58/toastandroid.html +++ b/docs/0.58/toastandroid.html @@ -139,10 +139,10 @@ ToastAndroid.render() { return ( - <View style={styles.container}> - <Toast visible={this.state.visible} message="Example" /> - <Button title="Toggle Modal" onPress={this.handleButtonPress} /> - </View> + <View style={styles.container}> + <Toast visible={this.state.visible} message="Example" /> + <Button title="Toggle Modal" onPress={this.handleButtonPress} /> + </View> ); } } diff --git a/docs/0.58/toastandroid/index.html b/docs/0.58/toastandroid/index.html index 977e9513fe4..f0fac97ac89 100644 --- a/docs/0.58/toastandroid/index.html +++ b/docs/0.58/toastandroid/index.html @@ -139,10 +139,10 @@ ToastAndroid.render() { return ( - <View style={styles.container}> - <Toast visible={this.state.visible} message="Example" /> - <Button title="Toggle Modal" onPress={this.handleButtonPress} /> - </View> + <View style={styles.container}> + <Toast visible={this.state.visible} message="Example" /> + <Button title="Toggle Modal" onPress={this.handleButtonPress} /> + </View> ); } } diff --git a/docs/0.58/touchablehighlight.html b/docs/0.58/touchablehighlight.html index 8b6baabd969..296c7092a3f 100644 --- a/docs/0.58/touchablehighlight.html +++ b/docs/0.58/touchablehighlight.html @@ -74,12 +74,12 @@

    Example:

    renderButton: function() {
       return (
    -    <TouchableHighlight onPress={this._onPressButton}>
    -      <Image
    +    <TouchableHighlight onPress={this._onPressButton}>
    +      <Image
             style={styles.button}
             source={require('./myButton.png')}
    -      />
    -    </TouchableHighlight>
    +      />
    +    </TouchableHighlight>
       );
     },
     
    diff --git a/docs/0.58/touchablehighlight/index.html b/docs/0.58/touchablehighlight/index.html index 8b6baabd969..296c7092a3f 100644 --- a/docs/0.58/touchablehighlight/index.html +++ b/docs/0.58/touchablehighlight/index.html @@ -74,12 +74,12 @@

    Example:

    renderButton: function() {
       return (
    -    <TouchableHighlight onPress={this._onPressButton}>
    -      <Image
    +    <TouchableHighlight onPress={this._onPressButton}>
    +      <Image
             style={styles.button}
             source={require('./myButton.png')}
    -      />
    -    </TouchableHighlight>
    +      />
    +    </TouchableHighlight>
       );
     },
     
    diff --git a/docs/0.58/touchablenativefeedback.html b/docs/0.58/touchablenativefeedback.html index e1322039cea..202b12921a8 100644 --- a/docs/0.58/touchablenativefeedback.html +++ b/docs/0.58/touchablenativefeedback.html @@ -76,11 +76,11 @@ return ( <TouchableNativeFeedback onPress={this._onPressButton} - background={TouchableNativeFeedback.SelectableBackground()}> - <View style={{width: 150, height: 100, backgroundColor: 'red'}}> - <Text style={{margin: 30}}>Button</Text> - </View> - </TouchableNativeFeedback> + background={TouchableNativeFeedback.SelectableBackground()}> + <View style={{width: 150, height: 100, backgroundColor: 'red'}}> + <Text style={{margin: 30}}>Button</Text> + </View> + </TouchableNativeFeedback> ); },
diff --git a/docs/0.58/touchablenativefeedback/index.html b/docs/0.58/touchablenativefeedback/index.html index e1322039cea..202b12921a8 100644 --- a/docs/0.58/touchablenativefeedback/index.html +++ b/docs/0.58/touchablenativefeedback/index.html @@ -76,11 +76,11 @@ return ( <TouchableNativeFeedback onPress={this._onPressButton} - background={TouchableNativeFeedback.SelectableBackground()}> - <View style={{width: 150, height: 100, backgroundColor: 'red'}}> - <Text style={{margin: 30}}>Button</Text> - </View> - </TouchableNativeFeedback> + background={TouchableNativeFeedback.SelectableBackground()}> + <View style={{width: 150, height: 100, backgroundColor: 'red'}}> + <Text style={{margin: 30}}>Button</Text> + </View> + </TouchableNativeFeedback> ); },
diff --git a/docs/0.58/touchableopacity.html b/docs/0.58/touchableopacity.html index 782724ad132..1b5d35c8890 100644 --- a/docs/0.58/touchableopacity.html +++ b/docs/0.58/touchableopacity.html @@ -73,12 +73,12 @@

Example:

renderButton: function() {
   return (
-    <TouchableOpacity onPress={this._onPressButton}>
-      <Image
+    <TouchableOpacity onPress={this._onPressButton}>
+      <Image
         style={styles.button}
         source={require('./myButton.png')}
-      />
-    </TouchableOpacity>
+      />
+    </TouchableOpacity>
   );
 },
 
diff --git a/docs/0.58/touchableopacity/index.html b/docs/0.58/touchableopacity/index.html index 782724ad132..1b5d35c8890 100644 --- a/docs/0.58/touchableopacity/index.html +++ b/docs/0.58/touchableopacity/index.html @@ -73,12 +73,12 @@

Example:

renderButton: function() {
   return (
-    <TouchableOpacity onPress={this._onPressButton}>
-      <Image
+    <TouchableOpacity onPress={this._onPressButton}>
+      <Image
         style={styles.button}
         source={require('./myButton.png')}
-      />
-    </TouchableOpacity>
+      />
+    </TouchableOpacity>
   );
 },
 
diff --git a/docs/0.58/vibration.html b/docs/0.58/vibration.html index 028cde8fff2..d59b455dd19 100644 --- a/docs/0.58/vibration.html +++ b/docs/0.58/vibration.html @@ -103,8 +103,8 @@ Vibration.ca

Reference

Methods

vibrate()

-
Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
-
+
Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
+

Trigger a vibration with specified pattern.

Parameters:

diff --git a/docs/0.58/vibration/index.html b/docs/0.58/vibration/index.html index 028cde8fff2..d59b455dd19 100644 --- a/docs/0.58/vibration/index.html +++ b/docs/0.58/vibration/index.html @@ -103,8 +103,8 @@ Vibration.ca

Reference

Methods

vibrate()

-
Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
-
+
Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
+

Trigger a vibration with specified pattern.

Parameters:

diff --git a/docs/0.58/view.html b/docs/0.58/view.html index 986e2315e49..d4b87d5cdae 100644 --- a/docs/0.58/view.html +++ b/docs/0.58/view.html @@ -79,11 +79,11 @@ flexDirection:'row', height:100, padding:20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View>);}} diff --git a/docs/0.58/view/index.html b/docs/0.58/view/index.html index 986e2315e49..d4b87d5cdae 100644 --- a/docs/0.58/view/index.html +++ b/docs/0.58/view/index.html @@ -79,11 +79,11 @@ flexDirection:'row', height:100, padding:20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View>);}} diff --git a/docs/0.58/viewpagerandroid.html b/docs/0.58/viewpagerandroid.html index 55371e1fb81..764e3fb67fa 100644 --- a/docs/0.58/viewpagerandroid.html +++ b/docs/0.58/viewpagerandroid.html @@ -75,14 +75,14 @@ return(<ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid>);} diff --git a/docs/0.58/viewpagerandroid/index.html b/docs/0.58/viewpagerandroid/index.html index 55371e1fb81..764e3fb67fa 100644 --- a/docs/0.58/viewpagerandroid/index.html +++ b/docs/0.58/viewpagerandroid/index.html @@ -75,14 +75,14 @@ return(<ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid>);} diff --git a/docs/0.58/virtualizedlist.html b/docs/0.58/virtualizedlist.html index 2de7a894cc7..e5d3ff5b2a2 100644 --- a/docs/0.58/virtualizedlist.html +++ b/docs/0.58/virtualizedlist.html @@ -126,8 +126,8 @@

Reference

Props

renderItem

-
(info: any) => ?React.Element<any>
-
+
(info: any) => ?React.Element<any>
+

Takes an item from data and renders it into the list

diff --git a/docs/0.58/virtualizedlist/index.html b/docs/0.58/virtualizedlist/index.html index 2de7a894cc7..e5d3ff5b2a2 100644 --- a/docs/0.58/virtualizedlist/index.html +++ b/docs/0.58/virtualizedlist/index.html @@ -126,8 +126,8 @@

Reference

Props

renderItem

-
(info: any) => ?React.Element<any>
-
+
(info: any) => ?React.Element<any>
+

Takes an item from data and renders it into the list

diff --git a/docs/0.59/accessibility.html b/docs/0.59/accessibility.html index 3d76bf0127c..ebc12629d01 100644 --- a/docs/0.59/accessibility.html +++ b/docs/0.59/accessibility.html @@ -76,10 +76,10 @@

accessible (iOS, Android)

When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

-
<View accessible={true}>
-  <Text>text one</Text>
-  <Text>text two</Text>
-</View>
+
<View accessible={true}>
+  <Text>text one</Text>
+  <Text>text two</Text>
+</View>
 

In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

accessibilityLabel (iOS, Android)

@@ -88,11 +88,11 @@
<TouchableOpacity
   accessible={true}
   accessibilityLabel="Tap me!"
-  onPress={this._onPress}>
-  <View style={styles.button}>
-    <Text style={styles.buttonText}>Press me!</Text>
-  </View>
-</TouchableOpacity>
+  onPress={this._onPress}>
+  <View style={styles.button}>
+    <Text style={styles.buttonText}>Press me!</Text>
+  </View>
+</TouchableOpacity>
 

In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

accessibilityHint (iOS, Android)

@@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

@@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.59/accessibility/index.html b/docs/0.59/accessibility/index.html index 3d76bf0127c..ebc12629d01 100644 --- a/docs/0.59/accessibility/index.html +++ b/docs/0.59/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.59/accessibilityinfo.html b/docs/0.59/accessibilityinfo.html index cd5669488fb..b394cf4c1eb 100644 --- a/docs/0.59/accessibilityinfo.html +++ b/docs/0.59/accessibilityinfo.html @@ -102,12 +102,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.59/accessibilityinfo/index.html b/docs/0.59/accessibilityinfo/index.html index cd5669488fb..b394cf4c1eb 100644 --- a/docs/0.59/accessibilityinfo/index.html +++ b/docs/0.59/accessibilityinfo/index.html @@ -102,12 +102,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.59/animatedvaluexy.html b/docs/0.59/animatedvaluexy.html index 23ed8cb1c36..1129d429faf 100644 --- a/docs/0.59/animatedvaluexy.html +++ b/docs/0.59/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.59/animatedvaluexy/index.html b/docs/0.59/animatedvaluexy/index.html index 23ed8cb1c36..1129d429faf 100644 --- a/docs/0.59/animatedvaluexy/index.html +++ b/docs/0.59/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.59/appstate.html b/docs/0.59/appstate.html index 5cdeae0b0aa..2d11b35b19f 100644 --- a/docs/0.59/appstate.html +++ b/docs/0.59/appstate.html @@ -111,7 +111,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.59/appstate/index.html b/docs/0.59/appstate/index.html index 5cdeae0b0aa..2d11b35b19f 100644 --- a/docs/0.59/appstate/index.html +++ b/docs/0.59/appstate/index.html @@ -111,7 +111,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.59/asyncstorage.html b/docs/0.59/asyncstorage.html index 5d631a4d910..a30df9601ce 100644 --- a/docs/0.59/asyncstorage.html +++ b/docs/0.59/asyncstorage.html @@ -219,8 +219,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -238,8 +238,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -267,8 +267,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -285,8 +285,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -307,8 +307,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/0.59/asyncstorage/index.html b/docs/0.59/asyncstorage/index.html index 5d631a4d910..a30df9601ce 100644 --- a/docs/0.59/asyncstorage/index.html +++ b/docs/0.59/asyncstorage/index.html @@ -219,8 +219,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -238,8 +238,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -267,8 +267,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -285,8 +285,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -307,8 +307,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/0.59/cameraroll.html b/docs/0.59/cameraroll.html index 22c4c78f609..04cabc76198 100644 --- a/docs/0.59/cameraroll.html +++ b/docs/0.59/cameraroll.html @@ -185,10 +185,10 @@ }; render() { return ( - <View> - <Button title="Load Images" onPress={this._handleButtonPress} /> - <ScrollView> - {this.state.photos.map((p, i) => { + <View> + <Button title="Load Images" onPress={this._handleButtonPress} /> + <ScrollView> + {this.state.photos.map((p, i) => { return ( <Image key={i} @@ -199,9 +199,9 @@ source={{ uri: p.node.image.uri }} /> ); - })} - </ScrollView> - </View> + })} + </ScrollView> + </View> ); } diff --git a/docs/0.59/cameraroll/index.html b/docs/0.59/cameraroll/index.html index 22c4c78f609..04cabc76198 100644 --- a/docs/0.59/cameraroll/index.html +++ b/docs/0.59/cameraroll/index.html @@ -185,10 +185,10 @@ }; render() { return ( - <View> - <Button title="Load Images" onPress={this._handleButtonPress} /> - <ScrollView> - {this.state.photos.map((p, i) => { + <View> + <Button title="Load Images" onPress={this._handleButtonPress} /> + <ScrollView> + {this.state.photos.map((p, i) => { return ( <Image key={i} @@ -199,9 +199,9 @@ source={{ uri: p.node.image.uri }} /> ); - })} - </ScrollView> - </View> + })} + </ScrollView> + </View> ); } diff --git a/docs/0.59/datepickerios.html b/docs/0.59/datepickerios.html index d47f78ceb57..e38bd37c99d 100644 --- a/docs/0.59/datepickerios.html +++ b/docs/0.59/datepickerios.html @@ -87,12 +87,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.59/datepickerios/index.html b/docs/0.59/datepickerios/index.html index d47f78ceb57..e38bd37c99d 100644 --- a/docs/0.59/datepickerios/index.html +++ b/docs/0.59/datepickerios/index.html @@ -87,12 +87,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.59/direct-manipulation.html b/docs/0.59/direct-manipulation.html index 6d64b31f9b6..2145d1dd291 100644 --- a/docs/0.59/direct-manipulation.html +++ b/docs/0.59/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.59/direct-manipulation/index.html b/docs/0.59/direct-manipulation/index.html index 6d64b31f9b6..2145d1dd291 100644 --- a/docs/0.59/direct-manipulation/index.html +++ b/docs/0.59/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.59/drawerlayoutandroid.html b/docs/0.59/drawerlayoutandroid.html index 1482dcfc0e6..83a821c9071 100644 --- a/docs/0.59/drawerlayoutandroid.html +++ b/docs/0.59/drawerlayoutandroid.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/0.59/drawerlayoutandroid/index.html b/docs/0.59/drawerlayoutandroid/index.html index 1482dcfc0e6..83a821c9071 100644 --- a/docs/0.59/drawerlayoutandroid/index.html +++ b/docs/0.59/drawerlayoutandroid/index.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/0.59/flatlist.html b/docs/0.59/flatlist.html index 192d4061502..f1bc168d780 100644 --- a/docs/0.59/flatlist.html +++ b/docs/0.59/flatlist.html @@ -101,11 +101,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -219,11 +219,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.59/flatlist/index.html b/docs/0.59/flatlist/index.html index 192d4061502..f1bc168d780 100644 --- a/docs/0.59/flatlist/index.html +++ b/docs/0.59/flatlist/index.html @@ -101,11 +101,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -219,11 +219,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}>
    + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight>)}/> diff --git a/docs/0.59/imagebackground.html b/docs/0.59/imagebackground.html index 1338437215b..ebc6ccd5f92 100644 --- a/docs/0.59/imagebackground.html +++ b/docs/0.59/imagebackground.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Props

    diff --git a/docs/0.59/imagebackground/index.html b/docs/0.59/imagebackground/index.html index 1338437215b..ebc6ccd5f92 100644 --- a/docs/0.59/imagebackground/index.html +++ b/docs/0.59/imagebackground/index.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Props

    diff --git a/docs/0.59/images.html b/docs/0.59/images.html index 64d81697c96..9a153a22d48 100644 --- a/docs/0.59/images.html +++ b/docs/0.59/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.59/images/index.html b/docs/0.59/images/index.html index 64d81697c96..9a153a22d48 100644 --- a/docs/0.59/images/index.html +++ b/docs/0.59/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.59/integration-with-existing-apps.html b/docs/0.59/integration-with-existing-apps.html index e32c8e89564..5a47242d9c5 100644 --- a/docs/0.59/integration-with-existing-apps.html +++ b/docs/0.59/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.59/integration-with-existing-apps/index.html b/docs/0.59/integration-with-existing-apps/index.html index e32c8e89564..5a47242d9c5 100644 --- a/docs/0.59/integration-with-existing-apps/index.html +++ b/docs/0.59/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.59/keyboardavoidingview.html b/docs/0.59/keyboardavoidingview.html index fa2749e1a54..51c127ae062 100644 --- a/docs/0.59/keyboardavoidingview.html +++ b/docs/0.59/keyboardavoidingview.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/0.59/keyboardavoidingview/index.html b/docs/0.59/keyboardavoidingview/index.html index fa2749e1a54..51c127ae062 100644 --- a/docs/0.59/keyboardavoidingview/index.html +++ b/docs/0.59/keyboardavoidingview/index.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/0.59/maskedviewios.html b/docs/0.59/maskedviewios.html index 2da60262fb7..7beb52e4ef6 100644 --- a/docs/0.59/maskedviewios.html +++ b/docs/0.59/maskedviewios.html @@ -90,22 +90,22 @@ flex: 1, justifyContent: 'center', alignItems: 'center', - }}
    >
    - <Text + }}> + <Text style={{ fontSize: 60, color: 'black', fontWeight: 'bold', - }}> + }}> Basic Mask - </Text> - </View> - }> - {/* Shows behind the mask, you can put anything here, such as an image */} - <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> - </MaskedViewIOS> + </Text> + </View> + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> + </MaskedViewIOS>);}} diff --git a/docs/0.59/maskedviewios/index.html b/docs/0.59/maskedviewios/index.html index 2da60262fb7..7beb52e4ef6 100644 --- a/docs/0.59/maskedviewios/index.html +++ b/docs/0.59/maskedviewios/index.html @@ -90,22 +90,22 @@ flex:1, justifyContent:'center', alignItems:'center', - }}> - <Text + }}> + <Text style={{ fontSize: 60, color: 'black', fontWeight: 'bold', - }}> + }}> Basic Mask - </Text> - </View> - }> - {/* Shows behind the mask, you can put anything here, such as an image */} - <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> - </MaskedViewIOS> + </Text> + </View> + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> + </MaskedViewIOS>);}} diff --git a/docs/0.59/modal.html b/docs/0.59/modal.html index 0fc499a5eeb..18484510a4d 100644 --- a/docs/0.59/modal.html +++ b/docs/0.59/modal.html @@ -86,35 +86,35 @@ render(){return( - <View style={{marginTop: 22}}> - <Modal + <View style={{marginTop: 22}}> + <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); - }}> - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> + }}> + <View style={{marginTop: 22}}> + <View> + <Text>Hello World!</Text> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - </View> - </View> - </Modal> + }}> + <Text>Hide Modal</Text> + </TouchableHighlight> + </View> + </View> + </Modal> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(true); - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - </View> + }}> + <Text>Show Modal</Text> + </TouchableHighlight> + </View>);}} diff --git a/docs/0.59/modal/index.html b/docs/0.59/modal/index.html index 0fc499a5eeb..18484510a4d 100644 --- a/docs/0.59/modal/index.html +++ b/docs/0.59/modal/index.html @@ -86,35 +86,35 @@ render(){return( - <View style={{marginTop: 22}}> - <Modal + <View style={{marginTop: 22}}> + <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); - }}> - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> + }}> + <View style={{marginTop: 22}}> + <View> + <Text>Hello World!</Text> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - </View> - </View> - </Modal> + }}> + <Text>Hide Modal</Text> + </TouchableHighlight> + </View> + </View> + </Modal> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(true); - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - </View> + }}> + <Text>Show Modal</Text> + </TouchableHighlight> + </View>);}} diff --git a/docs/0.59/native-components-ios.html b/docs/0.59/native-components-ios.html index a03c5296297..986027c87a9 100644 --- a/docs/0.59/native-components-ios.html +++ b/docs/0.59/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes
    diff --git a/docs/0.59/vibration/index.html b/docs/0.59/vibration/index.html index bdbc3e578ad..d539c479350 100644 --- a/docs/0.59/vibration/index.html +++ b/docs/0.59/vibration/index.html @@ -103,8 +103,8 @@ Vibration.ca

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.59/view.html b/docs/0.59/view.html index 7fd8a9ee035..96122920b1c 100644 --- a/docs/0.59/view.html +++ b/docs/0.59/view.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.59/view/index.html b/docs/0.59/view/index.html index 7fd8a9ee035..96122920b1c 100644 --- a/docs/0.59/view/index.html +++ b/docs/0.59/view/index.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.59/viewpagerandroid.html b/docs/0.59/viewpagerandroid.html index baf49591fa9..7c6bff003af 100644 --- a/docs/0.59/viewpagerandroid.html +++ b/docs/0.59/viewpagerandroid.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/0.59/viewpagerandroid/index.html b/docs/0.59/viewpagerandroid/index.html index baf49591fa9..7c6bff003af 100644 --- a/docs/0.59/viewpagerandroid/index.html +++ b/docs/0.59/viewpagerandroid/index.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/0.59/virtualizedlist.html b/docs/0.59/virtualizedlist.html index 6d408c7703f..54600f5a89d 100644 --- a/docs/0.59/virtualizedlist.html +++ b/docs/0.59/virtualizedlist.html @@ -126,8 +126,8 @@

    Reference

    Props

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/0.59/virtualizedlist/index.html b/docs/0.59/virtualizedlist/index.html index 6d408c7703f..54600f5a89d 100644 --- a/docs/0.59/virtualizedlist/index.html +++ b/docs/0.59/virtualizedlist/index.html @@ -126,8 +126,8 @@

    Reference

    Props

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/0.6/accessibility.html b/docs/0.6/accessibility.html index 435b997d55c..a8c3721ce56 100644 --- a/docs/0.6/accessibility.html +++ b/docs/0.6/accessibility.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.6/accessibility/index.html b/docs/0.6/accessibility/index.html index 435b997d55c..a8c3721ce56 100644 --- a/docs/0.6/accessibility/index.html +++ b/docs/0.6/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.6/accessibilityinfo.html b/docs/0.6/accessibilityinfo.html index 4dd8ae82441..071c408521f 100644 --- a/docs/0.6/accessibilityinfo.html +++ b/docs/0.6/accessibilityinfo.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.6/accessibilityinfo/index.html b/docs/0.6/accessibilityinfo/index.html index 4dd8ae82441..071c408521f 100644 --- a/docs/0.6/accessibilityinfo/index.html +++ b/docs/0.6/accessibilityinfo/index.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.6/animatedvaluexy.html b/docs/0.6/animatedvaluexy.html index 387561d100b..1b0b8f2f442 100644 --- a/docs/0.6/animatedvaluexy.html +++ b/docs/0.6/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.6/animatedvaluexy/index.html b/docs/0.6/animatedvaluexy/index.html index 387561d100b..1b0b8f2f442 100644 --- a/docs/0.6/animatedvaluexy/index.html +++ b/docs/0.6/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.6/appstate.html b/docs/0.6/appstate.html index 12eeeeb7a14..a739bf57a7b 100644 --- a/docs/0.6/appstate.html +++ b/docs/0.6/appstate.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.6/appstate/index.html b/docs/0.6/appstate/index.html index 12eeeeb7a14..a739bf57a7b 100644 --- a/docs/0.6/appstate/index.html +++ b/docs/0.6/appstate/index.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.6/direct-manipulation.html b/docs/0.6/direct-manipulation.html index b69f8380a6d..3f299ca2019 100644 --- a/docs/0.6/direct-manipulation.html +++ b/docs/0.6/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.6/direct-manipulation/index.html b/docs/0.6/direct-manipulation/index.html index b69f8380a6d..3f299ca2019 100644 --- a/docs/0.6/direct-manipulation/index.html +++ b/docs/0.6/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.6/flatlist.html b/docs/0.6/flatlist.html index 8b2b3cc044d..a13b8150a22 100644 --- a/docs/0.6/flatlist.html +++ b/docs/0.6/flatlist.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.6/flatlist/index.html b/docs/0.6/flatlist/index.html index 8b2b3cc044d..a13b8150a22 100644 --- a/docs/0.6/flatlist/index.html +++ b/docs/0.6/flatlist/index.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.6/images.html b/docs/0.6/images.html index bb8c3f52163..3d004d46d67 100644 --- a/docs/0.6/images.html +++ b/docs/0.6/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.6/images/index.html b/docs/0.6/images/index.html index bb8c3f52163..3d004d46d67 100644 --- a/docs/0.6/images/index.html +++ b/docs/0.6/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.6/integration-with-existing-apps.html b/docs/0.6/integration-with-existing-apps.html index 5d5e548b608..5d4ea381e36 100644 --- a/docs/0.6/integration-with-existing-apps.html +++ b/docs/0.6/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.6/integration-with-existing-apps/index.html b/docs/0.6/integration-with-existing-apps/index.html index 5d5e548b608..5d4ea381e36 100644 --- a/docs/0.6/integration-with-existing-apps/index.html +++ b/docs/0.6/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.6/native-components-ios.html b/docs/0.6/native-components-ios.html index 49657024a12..4e1eee5f04a 100644 --- a/docs/0.6/native-components-ios.html +++ b/docs/0.6/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes > - <Text>Hello {route.title}!</Text> - </TouchableHighlight> - } - style={{padding: 100}} - /> - ); -} - + }}> + <Text>Hello {route.title}!</Text> + </TouchableHighlight> + } + style={{padding: 100}} + /> + ); +} +

    In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The renderScene method is changed to either push or pop the navigator depending on the current route's index. Finally, the Text component in the scene is now wrapped in a TouchableHighlight component to help trigger the navigator transitions.

    Navigation Bar

    You can optionally pass in your own navigation bar by returning a Navigator.NavigationBar component to the navigationBar prop in Navigator. You can configure the navigation bar properties, through the routeMapper prop. There you set up the left, right, and title properties of the navigation bar:

    diff --git a/docs/0.6/refreshcontrol.html b/docs/0.6/refreshcontrol.html index bb0a82aa088..f2608200958 100644 --- a/docs/0.6/refreshcontrol.html +++ b/docs/0.6/refreshcontrol.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.6/refreshcontrol/index.html b/docs/0.6/refreshcontrol/index.html index bb0a82aa088..f2608200958 100644 --- a/docs/0.6/refreshcontrol/index.html +++ b/docs/0.6/refreshcontrol/index.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.6/slider.html b/docs/0.6/slider.html index 9c4b131a685..0dffa78ba50 100644 --- a/docs/0.6/slider.html +++ b/docs/0.6/slider.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.6/slider/index.html b/docs/0.6/slider/index.html index 9c4b131a685..0dffa78ba50 100644 --- a/docs/0.6/slider/index.html +++ b/docs/0.6/slider/index.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.6/vibration.html b/docs/0.6/vibration.html index fa6db137a16..c4850aede04 100644 --- a/docs/0.6/vibration.html +++ b/docs/0.6/vibration.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.6/vibration/index.html b/docs/0.6/vibration/index.html index fa6db137a16..c4850aede04 100644 --- a/docs/0.6/vibration/index.html +++ b/docs/0.6/vibration/index.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.6/view.html b/docs/0.6/view.html index 214f6da6485..b1c7ae0faec 100644 --- a/docs/0.6/view.html +++ b/docs/0.6/view.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.6/view/index.html b/docs/0.6/view/index.html index 214f6da6485..b1c7ae0faec 100644 --- a/docs/0.6/view/index.html +++ b/docs/0.6/view/index.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.60/accessibility.html b/docs/0.60/accessibility.html index f96f088bec1..ccfdbcb3289 100644 --- a/docs/0.60/accessibility.html +++ b/docs/0.60/accessibility.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.60/accessibility/index.html b/docs/0.60/accessibility/index.html index f96f088bec1..ccfdbcb3289 100644 --- a/docs/0.60/accessibility/index.html +++ b/docs/0.60/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.60/accessibilityinfo.html b/docs/0.60/accessibilityinfo.html index 8c571f2c04a..324ea152100 100644 --- a/docs/0.60/accessibilityinfo.html +++ b/docs/0.60/accessibilityinfo.html @@ -116,16 +116,16 @@ render() { return ( - <View> - <Text> - The reduce motion is{' '} - {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. - </Text> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The reduce motion is{' '} + {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. + </Text> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.60/accessibilityinfo/index.html b/docs/0.60/accessibilityinfo/index.html index 8c571f2c04a..324ea152100 100644 --- a/docs/0.60/accessibilityinfo/index.html +++ b/docs/0.60/accessibilityinfo/index.html @@ -116,16 +116,16 @@ render() { return ( - <View> - <Text> - The reduce motion is{' '} - {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. - </Text> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The reduce motion is{' '} + {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. + </Text> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.60/animatedvaluexy.html b/docs/0.60/animatedvaluexy.html index 99689fde3b6..5fb21c0e190 100644 --- a/docs/0.60/animatedvaluexy.html +++ b/docs/0.60/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.60/animatedvaluexy/index.html b/docs/0.60/animatedvaluexy/index.html index 99689fde3b6..5fb21c0e190 100644 --- a/docs/0.60/animatedvaluexy/index.html +++ b/docs/0.60/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.60/appstate.html b/docs/0.60/appstate.html index b4cd24a6048..17676f19728 100644 --- a/docs/0.60/appstate.html +++ b/docs/0.60/appstate.html @@ -111,7 +111,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.60/appstate/index.html b/docs/0.60/appstate/index.html index b4cd24a6048..17676f19728 100644 --- a/docs/0.60/appstate/index.html +++ b/docs/0.60/appstate/index.html @@ -111,7 +111,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.60/asyncstorage.html b/docs/0.60/asyncstorage.html index 9457bc0fa31..63b2c6bfc43 100644 --- a/docs/0.60/asyncstorage.html +++ b/docs/0.60/asyncstorage.html @@ -205,8 +205,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -224,8 +224,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -253,8 +253,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -271,8 +271,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -293,8 +293,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/0.60/asyncstorage/index.html b/docs/0.60/asyncstorage/index.html index 9457bc0fa31..63b2c6bfc43 100644 --- a/docs/0.60/asyncstorage/index.html +++ b/docs/0.60/asyncstorage/index.html @@ -205,8 +205,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -224,8 +224,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -253,8 +253,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -271,8 +271,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -293,8 +293,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/0.60/cameraroll.html b/docs/0.60/cameraroll.html index e97df0127c9..8b323e1ecc9 100644 --- a/docs/0.60/cameraroll.html +++ b/docs/0.60/cameraroll.html @@ -129,10 +129,10 @@ }; render() { return ( - <View> - <Button title="Load Images" onPress={this._handleButtonPress} /> - <ScrollView> - {this.state.photos.map((p, i) => { + <View> + <Button title="Load Images" onPress={this._handleButtonPress} /> + <ScrollView> + {this.state.photos.map((p, i) => { return ( <Image key={i} @@ -143,9 +143,9 @@ source={{ uri: p.node.image.uri }} /> ); - })} - </ScrollView> - </View> + })} + </ScrollView> + </View> ); } diff --git a/docs/0.60/cameraroll/index.html b/docs/0.60/cameraroll/index.html index e97df0127c9..8b323e1ecc9 100644 --- a/docs/0.60/cameraroll/index.html +++ b/docs/0.60/cameraroll/index.html @@ -129,10 +129,10 @@ }; render() { return ( - <View> - <Button title="Load Images" onPress={this._handleButtonPress} /> - <ScrollView> - {this.state.photos.map((p, i) => { + <View> + <Button title="Load Images" onPress={this._handleButtonPress} /> + <ScrollView> + {this.state.photos.map((p, i) => { return ( <Image key={i} @@ -143,9 +143,9 @@ source={{ uri: p.node.image.uri }} /> ); - })} - </ScrollView> - </View> + })} + </ScrollView> + </View> ); } diff --git a/docs/0.60/datepickerios.html b/docs/0.60/datepickerios.html index aeb9d8d7314..d09bf8f77b7 100644 --- a/docs/0.60/datepickerios.html +++ b/docs/0.60/datepickerios.html @@ -90,12 +90,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.60/datepickerios/index.html b/docs/0.60/datepickerios/index.html index aeb9d8d7314..d09bf8f77b7 100644 --- a/docs/0.60/datepickerios/index.html +++ b/docs/0.60/datepickerios/index.html @@ -90,12 +90,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.60/direct-manipulation.html b/docs/0.60/direct-manipulation.html index 99815f5ef9e..f870f7ac6af 100644 --- a/docs/0.60/direct-manipulation.html +++ b/docs/0.60/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.60/direct-manipulation/index.html b/docs/0.60/direct-manipulation/index.html index 99815f5ef9e..f870f7ac6af 100644 --- a/docs/0.60/direct-manipulation/index.html +++ b/docs/0.60/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.60/drawerlayoutandroid.html b/docs/0.60/drawerlayoutandroid.html index 40dafb3c4f6..137d59a5d15 100644 --- a/docs/0.60/drawerlayoutandroid.html +++ b/docs/0.60/drawerlayoutandroid.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/0.60/drawerlayoutandroid/index.html b/docs/0.60/drawerlayoutandroid/index.html index 40dafb3c4f6..137d59a5d15 100644 --- a/docs/0.60/drawerlayoutandroid/index.html +++ b/docs/0.60/drawerlayoutandroid/index.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/0.60/flatlist.html b/docs/0.60/flatlist.html index 19c69dcc120..7f3cd05278e 100644 --- a/docs/0.60/flatlist.html +++ b/docs/0.60/flatlist.html @@ -307,11 +307,11 @@ const styles = StyleSheet.create({ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.60/flatlist/index.html b/docs/0.60/flatlist/index.html index 19c69dcc120..7f3cd05278e 100644 --- a/docs/0.60/flatlist/index.html +++ b/docs/0.60/flatlist/index.html @@ -307,11 +307,11 @@ const styles = StyleSheet.create({ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}>
    + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} /> diff --git a/docs/0.60/imagebackground.html b/docs/0.60/imagebackground.html index 31f3c4cd3f1..3b01bc7c2f3 100644 --- a/docs/0.60/imagebackground.html +++ b/docs/0.60/imagebackground.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    diff --git a/docs/0.60/imagebackground/index.html b/docs/0.60/imagebackground/index.html index 31f3c4cd3f1..3b01bc7c2f3 100644 --- a/docs/0.60/imagebackground/index.html +++ b/docs/0.60/imagebackground/index.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    diff --git a/docs/0.60/images.html b/docs/0.60/images.html index dd1285a4189..36f1db5dfa3 100644 --- a/docs/0.60/images.html +++ b/docs/0.60/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.60/images/index.html b/docs/0.60/images/index.html index dd1285a4189..36f1db5dfa3 100644 --- a/docs/0.60/images/index.html +++ b/docs/0.60/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.60/integration-with-existing-apps.html b/docs/0.60/integration-with-existing-apps.html index 6c0d043973d..dc06de6a410 100644 --- a/docs/0.60/integration-with-existing-apps.html +++ b/docs/0.60/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.60/integration-with-existing-apps/index.html b/docs/0.60/integration-with-existing-apps/index.html index 6c0d043973d..dc06de6a410 100644 --- a/docs/0.60/integration-with-existing-apps/index.html +++ b/docs/0.60/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.60/keyboardavoidingview.html b/docs/0.60/keyboardavoidingview.html index 51628029c16..63b2bc098aa 100644 --- a/docs/0.60/keyboardavoidingview.html +++ b/docs/0.60/keyboardavoidingview.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/0.60/keyboardavoidingview/index.html b/docs/0.60/keyboardavoidingview/index.html index 51628029c16..63b2bc098aa 100644 --- a/docs/0.60/keyboardavoidingview/index.html +++ b/docs/0.60/keyboardavoidingview/index.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/0.60/layoutanimation.html b/docs/0.60/layoutanimation.html index d32674cfd3a..60e2a72424d 100644 --- a/docs/0.60/layoutanimation.html +++ b/docs/0.60/layoutanimation.html @@ -91,18 +91,18 @@ state = {expanded: false}; render() { return ( - <View style={{overflow: 'hidden'}}> - <TouchableOpacity + <View style={{overflow: 'hidden'}}> + <TouchableOpacity onPress={() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); this.setState({expanded: !this.state.expanded}); - }}> - <Text> - Press me to {this.state.expanded ? 'collapse' : 'expand'}! - </Text> - </TouchableOpacity> - {this.state.expanded && <Text>I disappear sometimes!</Text>} - </View> + }}>
    + <Text> + Press me to {this.state.expanded ? 'collapse' : 'expand'}! + </Text> + </TouchableOpacity> + {this.state.expanded && <Text>I disappear sometimes!</Text>} + </View> ); } } diff --git a/docs/0.60/layoutanimation/index.html b/docs/0.60/layoutanimation/index.html index d32674cfd3a..60e2a72424d 100644 --- a/docs/0.60/layoutanimation/index.html +++ b/docs/0.60/layoutanimation/index.html @@ -91,18 +91,18 @@ state = {expanded: false}; render() { return ( - <View style={{overflow: 'hidden'}}> - <TouchableOpacity + <View style={{overflow: 'hidden'}}> + <TouchableOpacity onPress={() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); this.setState({expanded: !this.state.expanded}); - }}> - <Text> - Press me to {this.state.expanded ? 'collapse' : 'expand'}! - </Text> - </TouchableOpacity> - {this.state.expanded && <Text>I disappear sometimes!</Text>} - </View> + }}>
    + <Text> + Press me to {this.state.expanded ? 'collapse' : 'expand'}! + </Text> + </TouchableOpacity> + {this.state.expanded && <Text>I disappear sometimes!</Text>} + </View> ); } } diff --git a/docs/0.60/maskedviewios.html b/docs/0.60/maskedviewios.html index da6394d373a..918721ea68a 100644 --- a/docs/0.60/maskedviewios.html +++ b/docs/0.60/maskedviewios.html @@ -90,22 +90,22 @@ flex: 1, justifyContent: 'center', alignItems: 'center', - }}> - <Text + }}> + <Text style={{ fontSize: 60, color: 'black', fontWeight: 'bold', - }}> + }}> Basic Mask - </Text> - </View> - }> - {/* Shows behind the mask, you can put anything here, such as an image */} - <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> - </MaskedViewIOS> + </Text> + </View> + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> + </MaskedViewIOS> ); } } diff --git a/docs/0.60/maskedviewios/index.html b/docs/0.60/maskedviewios/index.html index da6394d373a..918721ea68a 100644 --- a/docs/0.60/maskedviewios/index.html +++ b/docs/0.60/maskedviewios/index.html @@ -90,22 +90,22 @@ flex: 1, justifyContent: 'center', alignItems: 'center', - }}> - <Text + }}> + <Text style={{ fontSize: 60, color: 'black', fontWeight: 'bold', - }}> + }}> Basic Mask - </Text> - </View> - }> - {/* Shows behind the mask, you can put anything here, such as an image */} - <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> - </MaskedViewIOS> + </Text> + </View> + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> + </MaskedViewIOS> ); } } diff --git a/docs/0.60/modal.html b/docs/0.60/modal.html index 2fa916ed937..dd3b9765b5b 100644 --- a/docs/0.60/modal.html +++ b/docs/0.60/modal.html @@ -86,35 +86,35 @@ render() { return ( - <View style={{marginTop: 22}}> - <Modal + <View style={{marginTop: 22}}> + <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); - }}> - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> + }}> + <View style={{marginTop: 22}}> + <View> + <Text>Hello World!</Text> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - </View> - </View> - </Modal> + }}> + <Text>Hide Modal</Text> + </TouchableHighlight> + </View> + </View> + </Modal> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(true); - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - </View> + }}> + <Text>Show Modal</Text> + </TouchableHighlight> + </View> ); } } diff --git a/docs/0.60/modal/index.html b/docs/0.60/modal/index.html index 2fa916ed937..dd3b9765b5b 100644 --- a/docs/0.60/modal/index.html +++ b/docs/0.60/modal/index.html @@ -86,35 +86,35 @@ render() { return ( - <View style={{marginTop: 22}}> - <Modal + <View style={{marginTop: 22}}> + <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); - }}> - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> + }}> + <View style={{marginTop: 22}}> + <View> + <Text>Hello World!</Text> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - </View> - </View> - </Modal> + }}> + <Text>Hide Modal</Text> + </TouchableHighlight> + </View> + </View> + </Modal> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(true); - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - </View> + }}> + <Text>Show Modal</Text> + </TouchableHighlight> + </View> ); } } diff --git a/docs/0.60/native-components-ios.html b/docs/0.60/native-components-ios.html index 3312654c4dd..0ffdfdf6e0f 100644 --- a/docs/0.60/native-components-ios.html +++ b/docs/0.60/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes
    diff --git a/docs/0.60/vibration/index.html b/docs/0.60/vibration/index.html index 61c3bdc490c..0eb2707ffce 100644 --- a/docs/0.60/vibration/index.html +++ b/docs/0.60/vibration/index.html @@ -98,8 +98,8 @@ Vibration.ca

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.60/view.html b/docs/0.60/view.html index 07564e846a9..50462218553 100644 --- a/docs/0.60/view.html +++ b/docs/0.60/view.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.60/view/index.html b/docs/0.60/view/index.html index 07564e846a9..50462218553 100644 --- a/docs/0.60/view/index.html +++ b/docs/0.60/view/index.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.60/viewpagerandroid.html b/docs/0.60/viewpagerandroid.html index 6ea157b22dd..47de2ebddb6 100644 --- a/docs/0.60/viewpagerandroid.html +++ b/docs/0.60/viewpagerandroid.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/0.60/viewpagerandroid/index.html b/docs/0.60/viewpagerandroid/index.html index 6ea157b22dd..47de2ebddb6 100644 --- a/docs/0.60/viewpagerandroid/index.html +++ b/docs/0.60/viewpagerandroid/index.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/0.60/virtualizedlist.html b/docs/0.60/virtualizedlist.html index a2781e420e2..75a74f2b660 100644 --- a/docs/0.60/virtualizedlist.html +++ b/docs/0.60/virtualizedlist.html @@ -82,8 +82,8 @@

    Props

    Inherits ScrollView Props.

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/0.60/virtualizedlist/index.html b/docs/0.60/virtualizedlist/index.html index a2781e420e2..75a74f2b660 100644 --- a/docs/0.60/virtualizedlist/index.html +++ b/docs/0.60/virtualizedlist/index.html @@ -82,8 +82,8 @@

    Props

    Inherits ScrollView Props.

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/0.7/accessibility.html b/docs/0.7/accessibility.html index d095daa0a53..ba945fd6d84 100644 --- a/docs/0.7/accessibility.html +++ b/docs/0.7/accessibility.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.7/accessibility/index.html b/docs/0.7/accessibility/index.html index d095daa0a53..ba945fd6d84 100644 --- a/docs/0.7/accessibility/index.html +++ b/docs/0.7/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.7/accessibilityinfo.html b/docs/0.7/accessibilityinfo.html index 8676cd92f75..d5374458986 100644 --- a/docs/0.7/accessibilityinfo.html +++ b/docs/0.7/accessibilityinfo.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.7/accessibilityinfo/index.html b/docs/0.7/accessibilityinfo/index.html index 8676cd92f75..d5374458986 100644 --- a/docs/0.7/accessibilityinfo/index.html +++ b/docs/0.7/accessibilityinfo/index.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.7/animatedvaluexy.html b/docs/0.7/animatedvaluexy.html index 914137ed132..25482a17f98 100644 --- a/docs/0.7/animatedvaluexy.html +++ b/docs/0.7/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.7/animatedvaluexy/index.html b/docs/0.7/animatedvaluexy/index.html index 914137ed132..25482a17f98 100644 --- a/docs/0.7/animatedvaluexy/index.html +++ b/docs/0.7/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.7/appstate.html b/docs/0.7/appstate.html index 894523e284e..f6390000cc6 100644 --- a/docs/0.7/appstate.html +++ b/docs/0.7/appstate.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.7/appstate/index.html b/docs/0.7/appstate/index.html index 894523e284e..f6390000cc6 100644 --- a/docs/0.7/appstate/index.html +++ b/docs/0.7/appstate/index.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.7/direct-manipulation.html b/docs/0.7/direct-manipulation.html index c6ce8871355..31857a48a6b 100644 --- a/docs/0.7/direct-manipulation.html +++ b/docs/0.7/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.7/direct-manipulation/index.html b/docs/0.7/direct-manipulation/index.html index c6ce8871355..31857a48a6b 100644 --- a/docs/0.7/direct-manipulation/index.html +++ b/docs/0.7/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.7/flatlist.html b/docs/0.7/flatlist.html index abdc7673e3c..45de004e806 100644 --- a/docs/0.7/flatlist.html +++ b/docs/0.7/flatlist.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.7/flatlist/index.html b/docs/0.7/flatlist/index.html index abdc7673e3c..45de004e806 100644 --- a/docs/0.7/flatlist/index.html +++ b/docs/0.7/flatlist/index.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.7/images.html b/docs/0.7/images.html index 295106c04c4..4fb87f0cce0 100644 --- a/docs/0.7/images.html +++ b/docs/0.7/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.7/images/index.html b/docs/0.7/images/index.html index 295106c04c4..4fb87f0cce0 100644 --- a/docs/0.7/images/index.html +++ b/docs/0.7/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.7/integration-with-existing-apps.html b/docs/0.7/integration-with-existing-apps.html index a33c85ba47b..5a007aafc1d 100644 --- a/docs/0.7/integration-with-existing-apps.html +++ b/docs/0.7/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.7/integration-with-existing-apps/index.html b/docs/0.7/integration-with-existing-apps/index.html index a33c85ba47b..5a007aafc1d 100644 --- a/docs/0.7/integration-with-existing-apps/index.html +++ b/docs/0.7/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.7/native-components-ios.html b/docs/0.7/native-components-ios.html index e5cb3115073..e36a6ff5686 100644 --- a/docs/0.7/native-components-ios.html +++ b/docs/0.7/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes > - <Text>Hello {route.title}!</Text> - </TouchableHighlight> - } - style={{padding: 100}} - /> - ); -} - + }}> + <Text>Hello {route.title}!</Text> + </TouchableHighlight> + } + style={{padding: 100}} + /> + ); +} +

    In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The renderScene method is changed to either push or pop the navigator depending on the current route's index. Finally, the Text component in the scene is now wrapped in a TouchableHighlight component to help trigger the navigator transitions.

    Navigation Bar

    You can optionally pass in your own navigation bar by returning a Navigator.NavigationBar component to the navigationBar prop in Navigator. You can configure the navigation bar properties, through the routeMapper prop. There you set up the left, right, and title properties of the navigation bar:

    diff --git a/docs/0.7/refreshcontrol.html b/docs/0.7/refreshcontrol.html index f05926727e7..7ed246a34bb 100644 --- a/docs/0.7/refreshcontrol.html +++ b/docs/0.7/refreshcontrol.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.7/refreshcontrol/index.html b/docs/0.7/refreshcontrol/index.html index f05926727e7..7ed246a34bb 100644 --- a/docs/0.7/refreshcontrol/index.html +++ b/docs/0.7/refreshcontrol/index.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.7/slider.html b/docs/0.7/slider.html index 08878162f57..82f4af7add1 100644 --- a/docs/0.7/slider.html +++ b/docs/0.7/slider.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.7/slider/index.html b/docs/0.7/slider/index.html index 08878162f57..82f4af7add1 100644 --- a/docs/0.7/slider/index.html +++ b/docs/0.7/slider/index.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.7/vibration.html b/docs/0.7/vibration.html index 771a93ee127..1b64c9644d1 100644 --- a/docs/0.7/vibration.html +++ b/docs/0.7/vibration.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.7/vibration/index.html b/docs/0.7/vibration/index.html index 771a93ee127..1b64c9644d1 100644 --- a/docs/0.7/vibration/index.html +++ b/docs/0.7/vibration/index.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.7/view.html b/docs/0.7/view.html index 800bab09c60..a62a0987014 100644 --- a/docs/0.7/view.html +++ b/docs/0.7/view.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.7/view/index.html b/docs/0.7/view/index.html index 800bab09c60..a62a0987014 100644 --- a/docs/0.7/view/index.html +++ b/docs/0.7/view/index.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.8/accessibility.html b/docs/0.8/accessibility.html index 36e4a67d8a9..c49190960d2 100644 --- a/docs/0.8/accessibility.html +++ b/docs/0.8/accessibility.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.8/accessibility/index.html b/docs/0.8/accessibility/index.html index 36e4a67d8a9..c49190960d2 100644 --- a/docs/0.8/accessibility/index.html +++ b/docs/0.8/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.8/accessibilityinfo.html b/docs/0.8/accessibilityinfo.html index bef0fee49a3..981c74827e2 100644 --- a/docs/0.8/accessibilityinfo.html +++ b/docs/0.8/accessibilityinfo.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.8/accessibilityinfo/index.html b/docs/0.8/accessibilityinfo/index.html index bef0fee49a3..981c74827e2 100644 --- a/docs/0.8/accessibilityinfo/index.html +++ b/docs/0.8/accessibilityinfo/index.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.8/animatedvaluexy.html b/docs/0.8/animatedvaluexy.html index 1a1e754eabe..9950e9b571a 100644 --- a/docs/0.8/animatedvaluexy.html +++ b/docs/0.8/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.8/animatedvaluexy/index.html b/docs/0.8/animatedvaluexy/index.html index 1a1e754eabe..9950e9b571a 100644 --- a/docs/0.8/animatedvaluexy/index.html +++ b/docs/0.8/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.8/appstate.html b/docs/0.8/appstate.html index d96b8209c6c..f42047f8ce6 100644 --- a/docs/0.8/appstate.html +++ b/docs/0.8/appstate.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.8/appstate/index.html b/docs/0.8/appstate/index.html index d96b8209c6c..f42047f8ce6 100644 --- a/docs/0.8/appstate/index.html +++ b/docs/0.8/appstate/index.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.8/direct-manipulation.html b/docs/0.8/direct-manipulation.html index c47d3efe96e..dd4ec05cc52 100644 --- a/docs/0.8/direct-manipulation.html +++ b/docs/0.8/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.8/direct-manipulation/index.html b/docs/0.8/direct-manipulation/index.html index c47d3efe96e..dd4ec05cc52 100644 --- a/docs/0.8/direct-manipulation/index.html +++ b/docs/0.8/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.8/flatlist.html b/docs/0.8/flatlist.html index 6fb6a7aea43..b6d4b1de9a2 100644 --- a/docs/0.8/flatlist.html +++ b/docs/0.8/flatlist.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.8/flatlist/index.html b/docs/0.8/flatlist/index.html index 6fb6a7aea43..b6d4b1de9a2 100644 --- a/docs/0.8/flatlist/index.html +++ b/docs/0.8/flatlist/index.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.8/images.html b/docs/0.8/images.html index 37157ad0e7e..766a2ac8f93 100644 --- a/docs/0.8/images.html +++ b/docs/0.8/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.8/images/index.html b/docs/0.8/images/index.html index 37157ad0e7e..766a2ac8f93 100644 --- a/docs/0.8/images/index.html +++ b/docs/0.8/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.8/integration-with-existing-apps.html b/docs/0.8/integration-with-existing-apps.html index 0ddc039f4ac..abb700b99a5 100644 --- a/docs/0.8/integration-with-existing-apps.html +++ b/docs/0.8/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.8/integration-with-existing-apps/index.html b/docs/0.8/integration-with-existing-apps/index.html index 0ddc039f4ac..abb700b99a5 100644 --- a/docs/0.8/integration-with-existing-apps/index.html +++ b/docs/0.8/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.8/native-components-ios.html b/docs/0.8/native-components-ios.html index f4943902428..e2160cd4299 100644 --- a/docs/0.8/native-components-ios.html +++ b/docs/0.8/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes > - <Text>Hello {route.title}!</Text> - </TouchableHighlight> - } - style={{padding: 100}} - /> - ); -} - + }}> + <Text>Hello {route.title}!</Text> + </TouchableHighlight> + } + style={{padding: 100}} + /> + ); +} +

    In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The renderScene method is changed to either push or pop the navigator depending on the current route's index. Finally, the Text component in the scene is now wrapped in a TouchableHighlight component to help trigger the navigator transitions.

    Navigation Bar

    You can optionally pass in your own navigation bar by returning a Navigator.NavigationBar component to the navigationBar prop in Navigator. You can configure the navigation bar properties, through the routeMapper prop. There you set up the left, right, and title properties of the navigation bar:

    diff --git a/docs/0.8/refreshcontrol.html b/docs/0.8/refreshcontrol.html index 273c67d3129..e7259d4ff96 100644 --- a/docs/0.8/refreshcontrol.html +++ b/docs/0.8/refreshcontrol.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.8/refreshcontrol/index.html b/docs/0.8/refreshcontrol/index.html index 273c67d3129..e7259d4ff96 100644 --- a/docs/0.8/refreshcontrol/index.html +++ b/docs/0.8/refreshcontrol/index.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.8/slider.html b/docs/0.8/slider.html index f86fe0439c6..c47a46e6b37 100644 --- a/docs/0.8/slider.html +++ b/docs/0.8/slider.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.8/slider/index.html b/docs/0.8/slider/index.html index f86fe0439c6..c47a46e6b37 100644 --- a/docs/0.8/slider/index.html +++ b/docs/0.8/slider/index.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.8/vibration.html b/docs/0.8/vibration.html index ef91ac3c332..42d32c836a0 100644 --- a/docs/0.8/vibration.html +++ b/docs/0.8/vibration.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.8/vibration/index.html b/docs/0.8/vibration/index.html index ef91ac3c332..42d32c836a0 100644 --- a/docs/0.8/vibration/index.html +++ b/docs/0.8/vibration/index.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.8/view.html b/docs/0.8/view.html index 2227edb277c..a01760b2e05 100644 --- a/docs/0.8/view.html +++ b/docs/0.8/view.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.8/view/index.html b/docs/0.8/view/index.html index 2227edb277c..a01760b2e05 100644 --- a/docs/0.8/view/index.html +++ b/docs/0.8/view/index.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.9/accessibility.html b/docs/0.9/accessibility.html index 85a237cbc1a..f8143e19249 100644 --- a/docs/0.9/accessibility.html +++ b/docs/0.9/accessibility.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.9/accessibility/index.html b/docs/0.9/accessibility/index.html index 85a237cbc1a..f8143e19249 100644 --- a/docs/0.9/accessibility/index.html +++ b/docs/0.9/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/0.9/accessibilityinfo.html b/docs/0.9/accessibilityinfo.html index 72576a3b5ce..b971e76ec8d 100644 --- a/docs/0.9/accessibilityinfo.html +++ b/docs/0.9/accessibilityinfo.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.9/accessibilityinfo/index.html b/docs/0.9/accessibilityinfo/index.html index 72576a3b5ce..b971e76ec8d 100644 --- a/docs/0.9/accessibilityinfo/index.html +++ b/docs/0.9/accessibilityinfo/index.html @@ -46,12 +46,12 @@ render() { return ( - <View> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/0.9/animatedvaluexy.html b/docs/0.9/animatedvaluexy.html index f29777eaee6..558cb809da9 100644 --- a/docs/0.9/animatedvaluexy.html +++ b/docs/0.9/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.9/animatedvaluexy/index.html b/docs/0.9/animatedvaluexy/index.html index f29777eaee6..558cb809da9 100644 --- a/docs/0.9/animatedvaluexy/index.html +++ b/docs/0.9/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/0.9/appstate.html b/docs/0.9/appstate.html index 1f0d5faf43d..144cffcd2cc 100644 --- a/docs/0.9/appstate.html +++ b/docs/0.9/appstate.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.9/appstate/index.html b/docs/0.9/appstate/index.html index 1f0d5faf43d..144cffcd2cc 100644 --- a/docs/0.9/appstate/index.html +++ b/docs/0.9/appstate/index.html @@ -50,7 +50,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/0.9/direct-manipulation.html b/docs/0.9/direct-manipulation.html index eb110567813..a1a3e935dc9 100644 --- a/docs/0.9/direct-manipulation.html +++ b/docs/0.9/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.9/direct-manipulation/index.html b/docs/0.9/direct-manipulation/index.html index eb110567813..a1a3e935dc9 100644 --- a/docs/0.9/direct-manipulation/index.html +++ b/docs/0.9/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/0.9/flatlist.html b/docs/0.9/flatlist.html index af2988ee29e..3ba8ed586e0 100644 --- a/docs/0.9/flatlist.html +++ b/docs/0.9/flatlist.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.9/flatlist/index.html b/docs/0.9/flatlist/index.html index af2988ee29e..3ba8ed586e0 100644 --- a/docs/0.9/flatlist/index.html +++ b/docs/0.9/flatlist/index.html @@ -45,11 +45,11 @@ render() { const textColor = this.props.selected ? 'red' : 'black'; return ( - <TouchableOpacity onPress={this._onPress}> - <View> - <Text style={{color: textColor}}>{this.props.title}</Text> - </View> - </TouchableOpacity> + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{color: textColor}}>{this.props.title}</Text> + </View> + </TouchableOpacity> ); } } @@ -168,11 +168,11 @@ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/0.9/images.html b/docs/0.9/images.html index a570af47886..ec90053f03e 100644 --- a/docs/0.9/images.html +++ b/docs/0.9/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.9/images/index.html b/docs/0.9/images/index.html index a570af47886..ec90053f03e 100644 --- a/docs/0.9/images/index.html +++ b/docs/0.9/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/0.9/integration-with-existing-apps.html b/docs/0.9/integration-with-existing-apps.html index ebc8974ec9e..fe26bfb563f 100644 --- a/docs/0.9/integration-with-existing-apps.html +++ b/docs/0.9/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.9/integration-with-existing-apps/index.html b/docs/0.9/integration-with-existing-apps/index.html index ebc8974ec9e..fe26bfb563f 100644 --- a/docs/0.9/integration-with-existing-apps/index.html +++ b/docs/0.9/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/0.9/native-components-ios.html b/docs/0.9/native-components-ios.html index 41a78c936c9..d79bb9c4e64 100644 --- a/docs/0.9/native-components-ios.html +++ b/docs/0.9/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes > - <Text>Hello {route.title}!</Text> - </TouchableHighlight> - } - style={{padding: 100}} - /> - ); -} - + }}> + <Text>Hello {route.title}!</Text> + </TouchableHighlight> + } + style={{padding: 100}} + /> + ); +} +

    In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The renderScene method is changed to either push or pop the navigator depending on the current route's index. Finally, the Text component in the scene is now wrapped in a TouchableHighlight component to help trigger the navigator transitions.

    Navigation Bar

    You can optionally pass in your own navigation bar by returning a Navigator.NavigationBar component to the navigationBar prop in Navigator. You can configure the navigation bar properties, through the routeMapper prop. There you set up the left, right, and title properties of the navigation bar:

    diff --git a/docs/0.9/refreshcontrol.html b/docs/0.9/refreshcontrol.html index 818ede60dd6..fdbb28aaf2d 100644 --- a/docs/0.9/refreshcontrol.html +++ b/docs/0.9/refreshcontrol.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.9/refreshcontrol/index.html b/docs/0.9/refreshcontrol/index.html index 818ede60dd6..fdbb28aaf2d 100644 --- a/docs/0.9/refreshcontrol/index.html +++ b/docs/0.9/refreshcontrol/index.html @@ -39,9 +39,9 @@ /> } ... - > - ... - </ListView> + > + ... + </ListView> ); } ... diff --git a/docs/0.9/slider.html b/docs/0.9/slider.html index 6e4459a573f..a7070f70a9c 100644 --- a/docs/0.9/slider.html +++ b/docs/0.9/slider.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.9/slider/index.html b/docs/0.9/slider/index.html index 6e4459a573f..a7070f70a9c 100644 --- a/docs/0.9/slider/index.html +++ b/docs/0.9/slider/index.html @@ -37,15 +37,15 @@ render() { const {value} = this.state; return ( - <View style={styles.container}> - <Text style={styles.text}>{String(value)}</Text> - <Slider + <View style={styles.container}> + <Text style={styles.text}>{String(value)}</Text> + <Slider step={1} maximumValue={100} onValueChange={this.change.bind(this)} value={value} - /> - </View> + /> + </View> ); } } diff --git a/docs/0.9/vibration.html b/docs/0.9/vibration.html index ea5fc68fc3e..d0792ffafad 100644 --- a/docs/0.9/vibration.html +++ b/docs/0.9/vibration.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.9/vibration/index.html b/docs/0.9/vibration/index.html index ea5fc68fc3e..d0792ffafad 100644 --- a/docs/0.9/vibration/index.html +++ b/docs/0.9/vibration/index.html @@ -47,8 +47,8 @@ Vibration.cancel()

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/0.9/view.html b/docs/0.9/view.html index 33f9b77e75e..0c09f02e4e0 100644 --- a/docs/0.9/view.html +++ b/docs/0.9/view.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/0.9/view/index.html b/docs/0.9/view/index.html index 33f9b77e75e..0c09f02e4e0 100644 --- a/docs/0.9/view/index.html +++ b/docs/0.9/view/index.html @@ -23,11 +23,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/accessibility.html b/docs/accessibility.html index d88526469b5..36d67d4466e 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/accessibility/index.html b/docs/accessibility/index.html index d88526469b5..36d67d4466e 100644 --- a/docs/accessibility/index.html +++ b/docs/accessibility/index.html @@ -76,10 +76,10 @@

    accessible (iOS, Android)

    When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

    On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

    -
    <View accessible={true}>
    -  <Text>text one</Text>
    -  <Text>text two</Text>
    -</View>
    +
    <View accessible={true}>
    +  <Text>text one</Text>
    +  <Text>text two</Text>
    +</View>
     

    In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

    accessibilityLabel (iOS, Android)

    @@ -88,11 +88,11 @@
    <TouchableOpacity
       accessible={true}
       accessibilityLabel="Tap me!"
    -  onPress={this._onPress}>
    -  <View style={styles.button}>
    -    <Text style={styles.buttonText}>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +  onPress={this._onPress}>
    +  <View style={styles.button}>
    +    <Text style={styles.buttonText}>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

    accessibilityHint (iOS, Android)

    @@ -102,11 +102,11 @@ accessible={true} accessibilityLabel="Go back" accessibilityHint="Navigates to the previous screen" - onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Back</Text> - </View> -</TouchableOpacity> + onPress={this._onPress}> + <View style={styles.button}> + <Text style={styles.buttonText}>Back</Text> + </View> +</TouchableOpacity>

    iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs

    Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.

    @@ -200,28 +200,28 @@
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
  • -
    <TouchableWithoutFeedback onPress={this._addOne}>
    -  <View style={styles.embedded}>
    -    <Text>Click me</Text>
    -  </View>
    -</TouchableWithoutFeedback>
    -<Text accessibilityLiveRegion="polite">
    -  Clicked {this.state.count} times
    -</Text>
    +
    <TouchableWithoutFeedback onPress={this._addOne}>
    +  <View style={styles.embedded}>
    +    <Text>Click me</Text>
    +  </View>
    +</TouchableWithoutFeedback>
    +<Text accessibilityLiveRegion="polite">
    +  Clicked {this.state.count} times
    +</Text>
     

    In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    -
    <View style={styles.container}>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    -    <Text> First layout </Text>
    -  </View>
    -  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    -    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    -    <Text> Second layout </Text>
    -  </View>
    -</View>
    +
    <View style={styles.container}>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    +    <Text> First layout </Text>
    +  </View>
    +  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    +    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    +    <Text> Second layout </Text>
    +  </View>
    +</View>
     

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

    Accessibility Actions

    diff --git a/docs/accessibilityinfo.html b/docs/accessibilityinfo.html index f03afe86185..7e0112998b8 100644 --- a/docs/accessibilityinfo.html +++ b/docs/accessibilityinfo.html @@ -116,16 +116,16 @@ render() { return ( - <View> - <Text> - The reduce motion is{' '} - {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. - </Text> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The reduce motion is{' '} + {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. + </Text> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/accessibilityinfo/index.html b/docs/accessibilityinfo/index.html index f03afe86185..7e0112998b8 100644 --- a/docs/accessibilityinfo/index.html +++ b/docs/accessibilityinfo/index.html @@ -116,16 +116,16 @@ render() { return ( - <View> - <Text> - The reduce motion is{' '} - {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. - </Text> - <Text> - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + <View> + <Text> + The reduce motion is{' '} + {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. + </Text> + <Text> + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + </Text> + </View> ); } } diff --git a/docs/animatedvaluexy.html b/docs/animatedvaluexy.html index 806b641046b..19b1ea08282 100644 --- a/docs/animatedvaluexy.html +++ b/docs/animatedvaluexy.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/animatedvaluexy/index.html b/docs/animatedvaluexy/index.html index 806b641046b..19b1ea08282 100644 --- a/docs/animatedvaluexy/index.html +++ b/docs/animatedvaluexy/index.html @@ -42,9 +42,9 @@ return ( <Animated.View {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> + style={this.state.pan.getLayout()}> + {this.props.children} + </Animated.View> ); } } diff --git a/docs/appstate.html b/docs/appstate.html index cf49c7d6cc1..d0297d78e8a 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -111,7 +111,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/appstate/index.html b/docs/appstate/index.html index cf49c7d6cc1..d0297d78e8a 100644 --- a/docs/appstate/index.html +++ b/docs/appstate/index.html @@ -111,7 +111,7 @@ }; render() { - return <Text>Current state is: {this.state.appState}</Text>; + return <Text>Current state is: {this.state.appState}</Text>; } }
    diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index a4359f565c0..cc9693bf3ed 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -205,8 +205,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -224,8 +224,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -253,8 +253,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -271,8 +271,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -293,8 +293,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/asyncstorage/index.html b/docs/asyncstorage/index.html index a4359f565c0..cc9693bf3ed 100644 --- a/docs/asyncstorage/index.html +++ b/docs/asyncstorage/index.html @@ -205,8 +205,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -224,8 +224,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -253,8 +253,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -271,8 +271,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -293,8 +293,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 6739211dae3..3156ea00def 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -129,10 +129,10 @@ }; render() { return ( - <View> - <Button title="Load Images" onPress={this._handleButtonPress} /> - <ScrollView> - {this.state.photos.map((p, i) => { + <View> + <Button title="Load Images" onPress={this._handleButtonPress} /> + <ScrollView> + {this.state.photos.map((p, i) => { return ( <Image key={i} @@ -143,9 +143,9 @@ source={{ uri: p.node.image.uri }} /> ); - })} - </ScrollView> - </View> + })} + </ScrollView> + </View> ); } diff --git a/docs/cameraroll/index.html b/docs/cameraroll/index.html index 6739211dae3..3156ea00def 100644 --- a/docs/cameraroll/index.html +++ b/docs/cameraroll/index.html @@ -129,10 +129,10 @@ }; render() { return ( - <View> - <Button title="Load Images" onPress={this._handleButtonPress} /> - <ScrollView> - {this.state.photos.map((p, i) => { + <View> + <Button title="Load Images" onPress={this._handleButtonPress} /> + <ScrollView> + {this.state.photos.map((p, i) => { return ( <Image key={i} @@ -143,9 +143,9 @@ source={{ uri: p.node.image.uri }} /> ); - })} - </ScrollView> - </View> + })} + </ScrollView> + </View> ); } diff --git a/docs/datepickerios.html b/docs/datepickerios.html index e28b56a13ab..ab49870854b 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -90,12 +90,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/datepickerios/index.html b/docs/datepickerios/index.html index e28b56a13ab..ab49870854b 100644 --- a/docs/datepickerios/index.html +++ b/docs/datepickerios/index.html @@ -90,12 +90,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index 745d5f98a3a..fffed959b47 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/direct-manipulation/index.html b/docs/direct-manipulation/index.html index 745d5f98a3a..fffed959b47 100644 --- a/docs/direct-manipulation/index.html +++ b/docs/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html index 01473443ce9..d9e924e12eb 100644 --- a/docs/drawerlayoutandroid.html +++ b/docs/drawerlayoutandroid.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/drawerlayoutandroid/index.html b/docs/drawerlayoutandroid/index.html index 01473443ce9..d9e924e12eb 100644 --- a/docs/drawerlayoutandroid/index.html +++ b/docs/drawerlayoutandroid/index.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/flatlist.html b/docs/flatlist.html index 1cfab473099..5a2fc0f6528 100644 --- a/docs/flatlist.html +++ b/docs/flatlist.html @@ -307,11 +307,11 @@ const styles = StyleSheet.create({ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/flatlist/index.html b/docs/flatlist/index.html index 1cfab473099..5a2fc0f6528 100644 --- a/docs/flatlist/index.html +++ b/docs/flatlist/index.html @@ -307,11 +307,11 @@ const styles = StyleSheet.create({ <TouchableHighlight onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}>
    + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} /> diff --git a/docs/imagebackground.html b/docs/imagebackground.html index 152b3928882..db01cb40200 100644 --- a/docs/imagebackground.html +++ b/docs/imagebackground.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    diff --git a/docs/imagebackground/index.html b/docs/imagebackground/index.html index 152b3928882..db01cb40200 100644 --- a/docs/imagebackground/index.html +++ b/docs/imagebackground/index.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    diff --git a/docs/images.html b/docs/images.html index 3df6fb8d11c..2c5d1a65ed7 100644 --- a/docs/images.html +++ b/docs/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/images/index.html b/docs/images/index.html index 3df6fb8d11c..2c5d1a65ed7 100644 --- a/docs/images/index.html +++ b/docs/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/integration-with-existing-apps.html b/docs/integration-with-existing-apps.html index ec60fe95daa..9ce9c642967 100644 --- a/docs/integration-with-existing-apps.html +++ b/docs/integration-with-existing-apps.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/integration-with-existing-apps/index.html b/docs/integration-with-existing-apps/index.html index ec60fe95daa..9ce9c642967 100644 --- a/docs/integration-with-existing-apps/index.html +++ b/docs/integration-with-existing-apps/index.html @@ -267,16 +267,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -504,9 +504,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/keyboardavoidingview.html b/docs/keyboardavoidingview.html index 93437cee620..16dfec8e1ca 100644 --- a/docs/keyboardavoidingview.html +++ b/docs/keyboardavoidingview.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/keyboardavoidingview/index.html b/docs/keyboardavoidingview/index.html index 93437cee620..16dfec8e1ca 100644 --- a/docs/keyboardavoidingview/index.html +++ b/docs/keyboardavoidingview/index.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index 15f0edb5a71..7ab61498c17 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -91,18 +91,18 @@ state = {expanded: false}; render() { return ( - <View style={{overflow: 'hidden'}}> - <TouchableOpacity + <View style={{overflow: 'hidden'}}> + <TouchableOpacity onPress={() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); this.setState({expanded: !this.state.expanded}); - }}> - <Text> - Press me to {this.state.expanded ? 'collapse' : 'expand'}! - </Text> - </TouchableOpacity> - {this.state.expanded && <Text>I disappear sometimes!</Text>} - </View> + }}>
    + <Text> + Press me to {this.state.expanded ? 'collapse' : 'expand'}! + </Text> + </TouchableOpacity> + {this.state.expanded && <Text>I disappear sometimes!</Text>} + </View> ); } } diff --git a/docs/layoutanimation/index.html b/docs/layoutanimation/index.html index 15f0edb5a71..7ab61498c17 100644 --- a/docs/layoutanimation/index.html +++ b/docs/layoutanimation/index.html @@ -91,18 +91,18 @@ state = {expanded: false}; render() { return ( - <View style={{overflow: 'hidden'}}> - <TouchableOpacity + <View style={{overflow: 'hidden'}}> + <TouchableOpacity onPress={() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); this.setState({expanded: !this.state.expanded}); - }}> - <Text> - Press me to {this.state.expanded ? 'collapse' : 'expand'}! - </Text> - </TouchableOpacity> - {this.state.expanded && <Text>I disappear sometimes!</Text>} - </View> + }}>
    + <Text> + Press me to {this.state.expanded ? 'collapse' : 'expand'}! + </Text> + </TouchableOpacity> + {this.state.expanded && <Text>I disappear sometimes!</Text>} + </View> ); } } diff --git a/docs/maskedviewios.html b/docs/maskedviewios.html index 474e288c862..c26d240ab5a 100644 --- a/docs/maskedviewios.html +++ b/docs/maskedviewios.html @@ -90,22 +90,22 @@ flex: 1, justifyContent: 'center', alignItems: 'center', - }}> - <Text + }}> + <Text style={{ fontSize: 60, color: 'black', fontWeight: 'bold', - }}> + }}> Basic Mask - </Text> - </View> - }> - {/* Shows behind the mask, you can put anything here, such as an image */} - <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> - </MaskedViewIOS> + </Text> + </View> + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> + </MaskedViewIOS> ); } } diff --git a/docs/maskedviewios/index.html b/docs/maskedviewios/index.html index 474e288c862..c26d240ab5a 100644 --- a/docs/maskedviewios/index.html +++ b/docs/maskedviewios/index.html @@ -90,22 +90,22 @@ flex: 1, justifyContent: 'center', alignItems: 'center', - }}> - <Text + }}> + <Text style={{ fontSize: 60, color: 'black', fontWeight: 'bold', - }}> + }}> Basic Mask - </Text> - </View> - }> - {/* Shows behind the mask, you can put anything here, such as an image */} - <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> - <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> - </MaskedViewIOS> + </Text> + </View> + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} /> + <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} /> + </MaskedViewIOS> ); } } diff --git a/docs/modal.html b/docs/modal.html index 07b8eb8ba9c..ab6aadf58a2 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -86,35 +86,35 @@ render() { return ( - <View style={{marginTop: 22}}> - <Modal + <View style={{marginTop: 22}}> + <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); - }}> - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> + }}> + <View style={{marginTop: 22}}> + <View> + <Text>Hello World!</Text> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - </View> - </View> - </Modal> + }}> + <Text>Hide Modal</Text> + </TouchableHighlight> + </View> + </View> + </Modal> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(true); - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - </View> + }}> + <Text>Show Modal</Text> + </TouchableHighlight> + </View> ); } } diff --git a/docs/modal/index.html b/docs/modal/index.html index 07b8eb8ba9c..ab6aadf58a2 100644 --- a/docs/modal/index.html +++ b/docs/modal/index.html @@ -86,35 +86,35 @@ render() { return ( - <View style={{marginTop: 22}}> - <Modal + <View style={{marginTop: 22}}> + <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); - }}> - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> + }}> + <View style={{marginTop: 22}}> + <View> + <Text>Hello World!</Text> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - </View> - </View> - </Modal> + }}> + <Text>Hide Modal</Text> + </TouchableHighlight> + </View> + </View> + </Modal> - <TouchableHighlight + <TouchableHighlight onPress={() => { this.setModalVisible(true); - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - </View> + }}> + <Text>Show Modal</Text> + </TouchableHighlight> + </View> ); } } diff --git a/docs/native-components-ios.html b/docs/native-components-ios.html index 7d3636f66b5..94520cf7e40 100644 --- a/docs/native-components-ios.html +++ b/docs/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes
    @@ -224,8 +224,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -253,8 +253,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -271,8 +271,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -293,8 +293,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/next/asyncstorage/index.html b/docs/next/asyncstorage/index.html index eb6740569dc..c9f83c860a3 100644 --- a/docs/next/asyncstorage/index.html +++ b/docs/next/asyncstorage/index.html @@ -205,8 +205,8 @@ AsyncStorage.

    getAllKeys()

    -
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    -
    +
    static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
    +

    Gets all keys known to your app; for all callers, libraries, etc. Returns a Promise object.

    Parameters:

    @@ -224,8 +224,8 @@ AsyncStorage.Flushes any pending requests using a single batch call to get the data.


    multiGet()

    -
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    -
    +
    static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
    +

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
     
    @@ -253,8 +253,8 @@ AsyncStorage.

    multiSet()

    -
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
     
    @@ -271,8 +271,8 @@ AsyncStorage.

    multiRemove()

    -
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:

    @@ -293,8 +293,8 @@ AsyncStorage.

    multiMerge()

    -
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    -
    +
    static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
    +

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:

    diff --git a/docs/next/datepickerios.html b/docs/next/datepickerios.html index 60d80529b53..d0a235c54b8 100644 --- a/docs/next/datepickerios.html +++ b/docs/next/datepickerios.html @@ -90,12 +90,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/next/datepickerios/index.html b/docs/next/datepickerios/index.html index 60d80529b53..d0a235c54b8 100644 --- a/docs/next/datepickerios/index.html +++ b/docs/next/datepickerios/index.html @@ -90,12 +90,12 @@ render() { return ( - <View style={styles.container}> - <DatePickerIOS + <View style={styles.container}> + <DatePickerIOS date={this.state.chosenDate} onDateChange={this.setDate} - /> - </View> + /> + </View> ); } } diff --git a/docs/next/direct-manipulation.html b/docs/next/direct-manipulation.html index 771c41e25c1..75b34d7b606 100644 --- a/docs/next/direct-manipulation.html +++ b/docs/next/direct-manipulation.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/next/direct-manipulation/index.html b/docs/next/direct-manipulation/index.html index 771c41e25c1..75b34d7b606 100644 --- a/docs/next/direct-manipulation/index.html +++ b/docs/next/direct-manipulation/index.html @@ -83,11 +83,11 @@ },

    This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:

    -
    <TouchableOpacity onPress={this._handlePress}>
    -  <View style={styles.button}>
    -    <Text>Press me!</Text>
    -  </View>
    -</TouchableOpacity>
    +
    <TouchableOpacity onPress={this._handlePress}>
    +  <View style={styles.button}>
    +    <Text>Press me!</Text>
    +  </View>
    +</TouchableOpacity>
     

    Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:

    constructor(props) {
    @@ -98,11 +98,11 @@
     render() {
       return (
         <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
    -                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    -      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    -        <Text>Press me!</Text>
    -      </View>
    -    </TouchableOpacity>
    +                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
    +      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
    +        <Text>Press me!</Text>
    +      </View>
    +    </TouchableOpacity>
       )
     }
     
    diff --git a/docs/next/drawerlayoutandroid.html b/docs/next/drawerlayoutandroid.html index 9b4bb5dd612..e2af0c98540 100644 --- a/docs/next/drawerlayoutandroid.html +++ b/docs/next/drawerlayoutandroid.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/next/drawerlayoutandroid/index.html b/docs/next/drawerlayoutandroid/index.html index 9b4bb5dd612..e2af0c98540 100644 --- a/docs/next/drawerlayoutandroid/index.html +++ b/docs/next/drawerlayoutandroid/index.html @@ -72,20 +72,20 @@

    Example:

    render: function() {
       var navigationView = (
    -    <View style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    -    </View>
    +    <View style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
    +    </View>
       );
       return (
         <DrawerLayoutAndroid
           drawerWidth={300}
           drawerPosition={DrawerLayoutAndroid.positions.Left}
    -      renderNavigationView={() => navigationView}>
    -      <View style={{flex: 1, alignItems: 'center'}}>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    -        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    -      </View>
    -    </DrawerLayoutAndroid>
    +      renderNavigationView={() => navigationView}>
    +      <View style={{flex: 1, alignItems: 'center'}}>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    +        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    +      </View>
    +    </DrawerLayoutAndroid>
       );
     },
     
    diff --git a/docs/next/flatlist.html b/docs/next/flatlist.html index da9439be97a..153c4dbfda7 100644 --- a/docs/next/flatlist.html +++ b/docs/next/flatlist.html @@ -308,11 +308,11 @@ const styles = StyleSheet.create({ key={item.key} onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}> - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} />
    diff --git a/docs/next/flatlist/index.html b/docs/next/flatlist/index.html index da9439be97a..153c4dbfda7 100644 --- a/docs/next/flatlist/index.html +++ b/docs/next/flatlist/index.html @@ -308,11 +308,11 @@ const styles = StyleSheet.create({ key={item.key} onPress={() => this._onPress(item)} onShowUnderlay={separators.highlight} - onHideUnderlay={separators.unhighlight}>
    - <View style={{backgroundColor: 'white'}}> - <Text>{item.title}</Text> - </View> - </TouchableHighlight> + onHideUnderlay={separators.unhighlight}> + <View style={{backgroundColor: 'white'}}> + <Text>{item.title}</Text> + </View> + </TouchableHighlight> )} /> diff --git a/docs/next/imagebackground.html b/docs/next/imagebackground.html index 26203f14c2b..fa53d781759 100644 --- a/docs/next/imagebackground.html +++ b/docs/next/imagebackground.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    diff --git a/docs/next/imagebackground/index.html b/docs/next/imagebackground/index.html index 26203f14c2b..fa53d781759 100644 --- a/docs/next/imagebackground/index.html +++ b/docs/next/imagebackground/index.html @@ -73,9 +73,9 @@

    Note that you must specify some width and height style attributes.

    Example

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    diff --git a/docs/next/images.html b/docs/next/images.html index a0812508dea..045d5cd24f2 100644 --- a/docs/next/images.html +++ b/docs/next/images.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/next/images/index.html b/docs/next/images/index.html index a0812508dea..045d5cd24f2 100644 --- a/docs/next/images/index.html +++ b/docs/next/images/index.html @@ -201,9 +201,9 @@

    A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

    You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed.

    return (
    -  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    -    <Text>Inside</Text>
    -  </ImageBackground>
    +  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    +    <Text>Inside</Text>
    +  </ImageBackground>
     );
     

    Note that you must specify some width and height style attributes.

    diff --git a/docs/next/integration-with-existing-apps.html b/docs/next/integration-with-existing-apps.html index cd4384699c1..3d893b05c03 100644 --- a/docs/next/integration-with-existing-apps.html +++ b/docs/next/integration-with-existing-apps.html @@ -278,16 +278,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -515,9 +515,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/next/integration-with-existing-apps/index.html b/docs/next/integration-with-existing-apps/index.html index cd4384699c1..3d893b05c03 100644 --- a/docs/next/integration-with-existing-apps/index.html +++ b/docs/next/integration-with-existing-apps/index.html @@ -278,16 +278,16 @@ Pod installation complete! There are 3 dependencies f class RNHighScores extends React.Component { render() { var contents = this.props['scores'].map((score) => ( - <Text key={score.name}> - {score.name}:{score.value} - {'\n'} - </Text> + <Text key={score.name}> + {score.name}:{score.value} + {'\n'} + </Text> )); return ( - <View style={styles.container}> - <Text style={styles.highScoresTitle}>2048 High Scores!</Text> - <Text style={styles.scores}>{contents}</Text> - </View> + <View style={styles.container}> + <Text style={styles.highScoresTitle}>2048 High Scores!</Text> + <Text style={styles.scores}>{contents}</Text> + </View> ); } } @@ -515,9 +515,9 @@ $ react-native run-iosclass HelloWorld extends React.Component { render() { return ( - <View style={styles.container}> - <Text style={styles.hello}>Hello, World</Text> - </View> + <View style={styles.container}> + <Text style={styles.hello}>Hello, World</Text> + </View> ); } } diff --git a/docs/next/keyboardavoidingview.html b/docs/next/keyboardavoidingview.html index 26b5656a17c..8191e6814cb 100644 --- a/docs/next/keyboardavoidingview.html +++ b/docs/next/keyboardavoidingview.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/next/keyboardavoidingview/index.html b/docs/next/keyboardavoidingview/index.html index 26b5656a17c..8191e6814cb 100644 --- a/docs/next/keyboardavoidingview/index.html +++ b/docs/next/keyboardavoidingview/index.html @@ -72,9 +72,9 @@

    Example usage:

    import {KeyboardAvoidingView} from 'react-native';
     
    -<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    -  ... your UI ...
    -</KeyboardAvoidingView>;
    +<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    +  ... your UI ...
    +</KeyboardAvoidingView>;
     

    Example

    diff --git a/docs/next/layoutanimation.html b/docs/next/layoutanimation.html index 1e69d2459b0..ae0ee14bf87 100644 --- a/docs/next/layoutanimation.html +++ b/docs/next/layoutanimation.html @@ -91,18 +91,18 @@ state = {expanded: false}; render() { return ( - <View style={{overflow: 'hidden'}}> - <TouchableOpacity + <View style={{overflow: 'hidden'}}> + <TouchableOpacity onPress={() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); this.setState({expanded: !this.state.expanded}); - }}> - <Text> - Press me to {this.state.expanded ? 'collapse' : 'expand'}! - </Text> - </TouchableOpacity> - {this.state.expanded && <Text>I disappear sometimes!</Text>} - </View> + }}>
    + <Text> + Press me to {this.state.expanded ? 'collapse' : 'expand'}! + </Text> + </TouchableOpacity> + {this.state.expanded && <Text>I disappear sometimes!</Text>} + </View> ); } } diff --git a/docs/next/layoutanimation/index.html b/docs/next/layoutanimation/index.html index 1e69d2459b0..ae0ee14bf87 100644 --- a/docs/next/layoutanimation/index.html +++ b/docs/next/layoutanimation/index.html @@ -91,18 +91,18 @@ state = {expanded: false}; render() { return ( - <View style={{overflow: 'hidden'}}> - <TouchableOpacity + <View style={{overflow: 'hidden'}}> + <TouchableOpacity onPress={() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); this.setState({expanded: !this.state.expanded}); - }}> - <Text> - Press me to {this.state.expanded ? 'collapse' : 'expand'}! - </Text> - </TouchableOpacity> - {this.state.expanded && <Text>I disappear sometimes!</Text>} - </View> + }}>
    + <Text> + Press me to {this.state.expanded ? 'collapse' : 'expand'}! + </Text> + </TouchableOpacity> + {this.state.expanded && <Text>I disappear sometimes!</Text>} + </View> ); } } diff --git a/docs/next/native-components-ios.html b/docs/next/native-components-ios.html index da484ccff5c..3090ed9b57e 100644 --- a/docs/next/native-components-ios.html +++ b/docs/next/native-components-ios.html @@ -396,23 +396,23 @@ MapView.propTypes
    diff --git a/docs/next/vibration/index.html b/docs/next/vibration/index.html index db16487b957..f039840606b 100644 --- a/docs/next/vibration/index.html +++ b/docs/next/vibration/index.html @@ -98,8 +98,8 @@ Vibration.ca

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/next/view.html b/docs/next/view.html index 8aef8879e0b..e9fb127eeeb 100644 --- a/docs/next/view.html +++ b/docs/next/view.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/next/view/index.html b/docs/next/view/index.html index 8aef8879e0b..e9fb127eeeb 100644 --- a/docs/next/view/index.html +++ b/docs/next/view/index.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/next/viewpagerandroid.html b/docs/next/viewpagerandroid.html index abc59bde9ba..8a8881f2c3e 100644 --- a/docs/next/viewpagerandroid.html +++ b/docs/next/viewpagerandroid.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/next/viewpagerandroid/index.html b/docs/next/viewpagerandroid/index.html index abc59bde9ba..8a8881f2c3e 100644 --- a/docs/next/viewpagerandroid/index.html +++ b/docs/next/viewpagerandroid/index.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/next/virtualizedlist.html b/docs/next/virtualizedlist.html index befd3531dc4..4f3c09b27bf 100644 --- a/docs/next/virtualizedlist.html +++ b/docs/next/virtualizedlist.html @@ -82,8 +82,8 @@

    Props

    Inherits ScrollView Props.

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/next/virtualizedlist/index.html b/docs/next/virtualizedlist/index.html index befd3531dc4..4f3c09b27bf 100644 --- a/docs/next/virtualizedlist/index.html +++ b/docs/next/virtualizedlist/index.html @@ -82,8 +82,8 @@

    Props

    Inherits ScrollView Props.

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/picker.html b/docs/picker.html index 39740f9aa03..e856ba38d45 100644 --- a/docs/picker.html +++ b/docs/picker.html @@ -74,10 +74,10 @@ style={{height: 50, width: 100}} onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue}) - }> - <Picker.Item label="Java" value="java" /> - <Picker.Item label="JavaScript" value="js" /> -</Picker> + }> + <Picker.Item label="Java" value="java" /> + <Picker.Item label="JavaScript" value="js" /> +</Picker>

    Reference

    diff --git a/docs/picker/index.html b/docs/picker/index.html index 39740f9aa03..e856ba38d45 100644 --- a/docs/picker/index.html +++ b/docs/picker/index.html @@ -74,10 +74,10 @@ style={{height: 50, width: 100}} onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue}) - }> - <Picker.Item label="Java" value="java" /> - <Picker.Item label="JavaScript" value="js" /> -</Picker> + }> + <Picker.Item label="Java" value="java" /> + <Picker.Item label="JavaScript" value="js" /> +</Picker>

    Reference

    diff --git a/docs/progressbarandroid.html b/docs/progressbarandroid.html index 4c4bfe3fb79..2960b21b6a8 100644 --- a/docs/progressbarandroid.html +++ b/docs/progressbarandroid.html @@ -76,16 +76,16 @@ export default class App extends Component { render() { return ( - <View style={styles.container}> - <ProgressBarAndroid /> - <ProgressBarAndroid styleAttr="Horizontal" /> - <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" /> - <ProgressBarAndroid + <View style={styles.container}> + <ProgressBarAndroid /> + <ProgressBarAndroid styleAttr="Horizontal" /> + <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" /> + <ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={0.5} - /> - </View> + /> + </View> ); } } diff --git a/docs/progressbarandroid/index.html b/docs/progressbarandroid/index.html index 4c4bfe3fb79..2960b21b6a8 100644 --- a/docs/progressbarandroid/index.html +++ b/docs/progressbarandroid/index.html @@ -76,16 +76,16 @@ export default class App extends Component { render() { return ( - <View style={styles.container}> - <ProgressBarAndroid /> - <ProgressBarAndroid styleAttr="Horizontal" /> - <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" /> - <ProgressBarAndroid + <View style={styles.container}> + <ProgressBarAndroid /> + <ProgressBarAndroid styleAttr="Horizontal" /> + <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" /> + <ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={0.5} - /> - </View> + /> + </View> ); } } diff --git a/docs/statusbar.html b/docs/statusbar.html index c7748d6a6bc..ae77946435d 100644 --- a/docs/statusbar.html +++ b/docs/statusbar.html @@ -71,13 +71,13 @@
    Edit

    StatusBar

    Component to control the app status bar.

    Usage with Navigator

    It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.

    -
    <View>
    -  <StatusBar backgroundColor="blue" barStyle="light-content" />
    -  <View>
    -    <StatusBar hidden={route.statusBarHidden} />
    -    ...
    -  </View>
    -</View>
    +
    <View>
    +  <StatusBar backgroundColor="blue" barStyle="light-content" />
    +  <View>
    +    <StatusBar hidden={route.statusBarHidden} />
    +    ...
    +  </View>
    +</View>
     

    Imperative API

    For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overridden by the one set by the component in the next render.

    diff --git a/docs/statusbar/index.html b/docs/statusbar/index.html index c7748d6a6bc..ae77946435d 100644 --- a/docs/statusbar/index.html +++ b/docs/statusbar/index.html @@ -71,13 +71,13 @@
    Edit

    StatusBar

    Component to control the app status bar.

    Usage with Navigator

    It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.

    -
    <View>
    -  <StatusBar backgroundColor="blue" barStyle="light-content" />
    -  <View>
    -    <StatusBar hidden={route.statusBarHidden} />
    -    ...
    -  </View>
    -</View>
    +
    <View>
    +  <StatusBar backgroundColor="blue" barStyle="light-content" />
    +  <View>
    +    <StatusBar hidden={route.statusBarHidden} />
    +    ...
    +  </View>
    +</View>
     

    Imperative API

    For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overridden by the one set by the component in the next render.

    diff --git a/docs/stylesheet.html b/docs/stylesheet.html index 45737c7045b..385b077e6d7 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -86,9 +86,9 @@ });

    Use a StyleSheet:

    -
    <View style={styles.container}>
    -  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
    -</View>
    +
    <View style={styles.container}>
    +  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
    +</View>
     

    Code quality:

      diff --git a/docs/stylesheet/index.html b/docs/stylesheet/index.html index 45737c7045b..385b077e6d7 100644 --- a/docs/stylesheet/index.html +++ b/docs/stylesheet/index.html @@ -86,9 +86,9 @@ });

    Use a StyleSheet:

    -
    <View style={styles.container}>
    -  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
    -</View>
    +
    <View style={styles.container}>
    +  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
    +</View>
     

    Code quality:

      diff --git a/docs/text.html b/docs/text.html index 87ddd14c634..723c9e509e1 100644 --- a/docs/text.html +++ b/docs/text.html @@ -160,10 +160,10 @@

    Containers

    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>
    -</Text>
    +
    <Text>
    +  <Text>First part and </Text>
    +  <Text>second part</Text>
    +</Text>
     // Text container: the text will be inline if the space allowed it
     // |First part and second part|
     
    @@ -172,10 +172,10 @@
     // |and second |
     // |part       |
     
    -<View>
    -  <Text>First part and </Text>
    -  <Text>second part</Text>
    -</View>
    +<View>
    +  <Text>First part and </Text>
    +  <Text>second part</Text>
    +</View>
     // View container: each text is its own block
     // |First part and|
     // |second part   |
    @@ -196,42 +196,42 @@
     

    All elements in the document will inherit this font unless they or one of their parents specifies a new rule.

    In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>.

    // BAD: will raise exception, can't have a text node as child of a <View>
    -<View>
    +<View>
       Some text
    -</View>
    +</View>
     
     // GOOD
    -<View>
    -  <Text>
    +<View>
    +  <Text>
         Some text
    -  </Text>
    -</View>
    +  </Text>
    +</View>
     

    You also lose the ability to set up a default font for an entire subtree. Meanwhile, fontFamily only accepts a single font name, which is different from font-family in CSS. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.

    -
    <View>
    -  <MyAppText>
    -    Text styled with the default font for the entire application
    -  </MyAppText>
    -  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
    -</View>
    +
    <View>
    +  <MyAppText>
    +    Text styled with the default font for the entire application
    +  </MyAppText>
    +  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
    +</View>
     

    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() {
         return (
    -      <MyAppText>
    -        <Text style={{fontSize: 20}}>{this.props.children}</Text>
    -      </MyAppText>
    +      <MyAppText>
    +        <Text style={{fontSize: 20}}>{this.props.children}</Text>
    +      </MyAppText>
         );
       }
     }
     

    Composing MyAppText in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.

    React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

    -
    <Text style={{fontWeight: 'bold'}}>
    -  I am bold
    -  <Text style={{color: 'red'}}>and red</Text>
    -</Text>
    +
    <Text style={{fontWeight: 'bold'}}>
    +  I am bold
    +  <Text style={{color: 'red'}}>and red</Text>
    +</Text>
     

    We believe that this more constrained way to style text will yield better apps:

      diff --git a/docs/text/index.html b/docs/text/index.html index 87ddd14c634..723c9e509e1 100644 --- a/docs/text/index.html +++ b/docs/text/index.html @@ -160,10 +160,10 @@

    Containers

    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>
    -</Text>
    +
    <Text>
    +  <Text>First part and </Text>
    +  <Text>second part</Text>
    +</Text>
     // Text container: the text will be inline if the space allowed it
     // |First part and second part|
     
    @@ -172,10 +172,10 @@
     // |and second |
     // |part       |
     
    -<View>
    -  <Text>First part and </Text>
    -  <Text>second part</Text>
    -</View>
    +<View>
    +  <Text>First part and </Text>
    +  <Text>second part</Text>
    +</View>
     // View container: each text is its own block
     // |First part and|
     // |second part   |
    @@ -196,42 +196,42 @@
     

    All elements in the document will inherit this font unless they or one of their parents specifies a new rule.

    In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>.

    // BAD: will raise exception, can't have a text node as child of a <View>
    -<View>
    +<View>
       Some text
    -</View>
    +</View>
     
     // GOOD
    -<View>
    -  <Text>
    +<View>
    +  <Text>
         Some text
    -  </Text>
    -</View>
    +  </Text>
    +</View>
     

    You also lose the ability to set up a default font for an entire subtree. Meanwhile, fontFamily only accepts a single font name, which is different from font-family in CSS. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.

    -
    <View>
    -  <MyAppText>
    -    Text styled with the default font for the entire application
    -  </MyAppText>
    -  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
    -</View>
    +
    <View>
    +  <MyAppText>
    +    Text styled with the default font for the entire application
    +  </MyAppText>
    +  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
    +</View>
     

    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() {
         return (
    -      <MyAppText>
    -        <Text style={{fontSize: 20}}>{this.props.children}</Text>
    -      </MyAppText>
    +      <MyAppText>
    +        <Text style={{fontSize: 20}}>{this.props.children}</Text>
    +      </MyAppText>
         );
       }
     }
     

    Composing MyAppText in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.

    React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

    -
    <Text style={{fontWeight: 'bold'}}>
    -  I am bold
    -  <Text style={{color: 'red'}}>and red</Text>
    -</Text>
    +
    <Text style={{fontWeight: 'bold'}}>
    +  I am bold
    +  <Text style={{color: 'red'}}>and red</Text>
    +</Text>
     

    We believe that this more constrained way to style text will yield better apps:

      diff --git a/docs/toastandroid.html b/docs/toastandroid.html index d084e8c1a41..fb11517246f 100644 --- a/docs/toastandroid.html +++ b/docs/toastandroid.html @@ -139,10 +139,10 @@ ToastAndroid.render() { return ( - <View style={styles.container}> - <Toast visible={this.state.visible} message="Example" /> - <Button title="Toggle Modal" onPress={this.handleButtonPress} /> - </View> + <View style={styles.container}> + <Toast visible={this.state.visible} message="Example" /> + <Button title="Toggle Modal" onPress={this.handleButtonPress} /> + </View> ); } } diff --git a/docs/toastandroid/index.html b/docs/toastandroid/index.html index d084e8c1a41..fb11517246f 100644 --- a/docs/toastandroid/index.html +++ b/docs/toastandroid/index.html @@ -139,10 +139,10 @@ ToastAndroid.render() { return ( - <View style={styles.container}> - <Toast visible={this.state.visible} message="Example" /> - <Button title="Toggle Modal" onPress={this.handleButtonPress} /> - </View> + <View style={styles.container}> + <Toast visible={this.state.visible} message="Example" /> + <Button title="Toggle Modal" onPress={this.handleButtonPress} /> + </View> ); } } diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index 6ad80cf5598..1e7b1226888 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -74,12 +74,12 @@

      Example:

      renderButton: function() {
         return (
      -    <TouchableHighlight onPress={this._onPressButton}>
      -      <Image
      +    <TouchableHighlight onPress={this._onPressButton}>
      +      <Image
               style={styles.button}
               source={require('./myButton.png')}
      -      />
      -    </TouchableHighlight>
      +      />
      +    </TouchableHighlight>
         );
       },
       
      diff --git a/docs/touchablehighlight/index.html b/docs/touchablehighlight/index.html index 6ad80cf5598..1e7b1226888 100644 --- a/docs/touchablehighlight/index.html +++ b/docs/touchablehighlight/index.html @@ -74,12 +74,12 @@

      Example:

      renderButton: function() {
         return (
      -    <TouchableHighlight onPress={this._onPressButton}>
      -      <Image
      +    <TouchableHighlight onPress={this._onPressButton}>
      +      <Image
               style={styles.button}
               source={require('./myButton.png')}
      -      />
      -    </TouchableHighlight>
      +      />
      +    </TouchableHighlight>
         );
       },
       
      diff --git a/docs/touchablenativefeedback.html b/docs/touchablenativefeedback.html index 0aaa6331d09..e8b6c0eb34c 100644 --- a/docs/touchablenativefeedback.html +++ b/docs/touchablenativefeedback.html @@ -76,11 +76,11 @@ return ( <TouchableNativeFeedback onPress={this._onPressButton} - background={TouchableNativeFeedback.SelectableBackground()}> - <View style={{width: 150, height: 100, backgroundColor: 'red'}}> - <Text style={{margin: 30}}>Button</Text> - </View> - </TouchableNativeFeedback> + background={TouchableNativeFeedback.SelectableBackground()}> + <View style={{width: 150, height: 100, backgroundColor: 'red'}}> + <Text style={{margin: 30}}>Button</Text> + </View> + </TouchableNativeFeedback> ); },
    diff --git a/docs/touchablenativefeedback/index.html b/docs/touchablenativefeedback/index.html index 0aaa6331d09..e8b6c0eb34c 100644 --- a/docs/touchablenativefeedback/index.html +++ b/docs/touchablenativefeedback/index.html @@ -76,11 +76,11 @@ return ( <TouchableNativeFeedback onPress={this._onPressButton} - background={TouchableNativeFeedback.SelectableBackground()}> - <View style={{width: 150, height: 100, backgroundColor: 'red'}}> - <Text style={{margin: 30}}>Button</Text> - </View> - </TouchableNativeFeedback> + background={TouchableNativeFeedback.SelectableBackground()}> + <View style={{width: 150, height: 100, backgroundColor: 'red'}}> + <Text style={{margin: 30}}>Button</Text> + </View> + </TouchableNativeFeedback> ); },
    diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index 8145c718290..c5f944bc209 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -73,12 +73,12 @@

    Example:

    renderButton: function() {
       return (
    -    <TouchableOpacity onPress={this._onPressButton}>
    -      <Image
    +    <TouchableOpacity onPress={this._onPressButton}>
    +      <Image
             style={styles.button}
             source={require('./myButton.png')}
    -      />
    -    </TouchableOpacity>
    +      />
    +    </TouchableOpacity>
       );
     },
     
    diff --git a/docs/touchableopacity/index.html b/docs/touchableopacity/index.html index 8145c718290..c5f944bc209 100644 --- a/docs/touchableopacity/index.html +++ b/docs/touchableopacity/index.html @@ -73,12 +73,12 @@

    Example:

    renderButton: function() {
       return (
    -    <TouchableOpacity onPress={this._onPressButton}>
    -      <Image
    +    <TouchableOpacity onPress={this._onPressButton}>
    +      <Image
             style={styles.button}
             source={require('./myButton.png')}
    -      />
    -    </TouchableOpacity>
    +      />
    +    </TouchableOpacity>
       );
     },
     
    diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index e85600aecd5..4943fc4cca9 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -73,15 +73,15 @@

    Usage Example

    function MyComponent(props) {
       return (
    -    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text>My Component</Text>
    -    </View>
    +    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text>My Component</Text>
    +    </View>
       );
     }
     
    -<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
    -  <MyComponent />
    -</TouchableWithoutFeedback>;
    +<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
    +  <MyComponent />
    +</TouchableWithoutFeedback>;
     

    Reference

    diff --git a/docs/touchablewithoutfeedback/index.html b/docs/touchablewithoutfeedback/index.html index e85600aecd5..4943fc4cca9 100644 --- a/docs/touchablewithoutfeedback/index.html +++ b/docs/touchablewithoutfeedback/index.html @@ -73,15 +73,15 @@

    Usage Example

    function MyComponent(props) {
       return (
    -    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
    -      <Text>My Component</Text>
    -    </View>
    +    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
    +      <Text>My Component</Text>
    +    </View>
       );
     }
     
    -<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
    -  <MyComponent />
    -</TouchableWithoutFeedback>;
    +<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
    +  <MyComponent />
    +</TouchableWithoutFeedback>;
     

    Reference

    diff --git a/docs/vibration.html b/docs/vibration.html index fb410e87b19..160fb3eeb8c 100644 --- a/docs/vibration.html +++ b/docs/vibration.html @@ -98,8 +98,8 @@ Vibration.ca

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/vibration/index.html b/docs/vibration/index.html index fb410e87b19..160fb3eeb8c 100644 --- a/docs/vibration/index.html +++ b/docs/vibration/index.html @@ -98,8 +98,8 @@ Vibration.ca

    Reference

    Methods

    vibrate()

    -
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    -
    +
    Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
    +

    Trigger a vibration with specified pattern.

    Parameters:

    diff --git a/docs/view.html b/docs/view.html index aa76afff5d6..083780b44b0 100644 --- a/docs/view.html +++ b/docs/view.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/view/index.html b/docs/view/index.html index aa76afff5d6..083780b44b0 100644 --- a/docs/view/index.html +++ b/docs/view/index.html @@ -79,11 +79,11 @@ flexDirection: 'row', height: 100, padding: 20, - }}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <Text>Hello World!</Text> - </View> + }}> + <View style={{backgroundColor: 'blue', flex: 0.3}} /> + <View style={{backgroundColor: 'red', flex: 0.5}} /> + <Text>Hello World!</Text> + </View> ); } } diff --git a/docs/viewpagerandroid.html b/docs/viewpagerandroid.html index 6d57699f3ce..f3fbb7af301 100644 --- a/docs/viewpagerandroid.html +++ b/docs/viewpagerandroid.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/viewpagerandroid/index.html b/docs/viewpagerandroid/index.html index 6d57699f3ce..f3fbb7af301 100644 --- a/docs/viewpagerandroid/index.html +++ b/docs/viewpagerandroid/index.html @@ -78,14 +78,14 @@ return ( <ViewPagerAndroid style={styles.viewPager} - initialPage={0}> - <View style={styles.pageStyle} key="1"> - <Text>First page</Text> - </View> - <View style={styles.pageStyle} key="2"> - <Text>Second page</Text> - </View> - </ViewPagerAndroid> + initialPage={0}> + <View style={styles.pageStyle} key="1"> + <Text>First page</Text> + </View> + <View style={styles.pageStyle} key="2"> + <Text>Second page</Text> + </View> + </ViewPagerAndroid> ); } diff --git a/docs/virtualizedlist.html b/docs/virtualizedlist.html index deefd452ea2..04d9fe4fe06 100644 --- a/docs/virtualizedlist.html +++ b/docs/virtualizedlist.html @@ -82,8 +82,8 @@

    Props

    Inherits ScrollView Props.

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/docs/virtualizedlist/index.html b/docs/virtualizedlist/index.html index deefd452ea2..04d9fe4fe06 100644 --- a/docs/virtualizedlist/index.html +++ b/docs/virtualizedlist/index.html @@ -82,8 +82,8 @@

    Props

    Inherits ScrollView Props.

    renderItem

    -
    (info: any) => ?React.Element<any>
    -
    +
    (info: any) => ?React.Element<any>
    +

    Takes an item from data and renders it into the list

    diff --git a/en/index.html b/en/index.html index ecc1addc962..126318aa320 100644 --- a/en/index.html +++ b/en/index.html @@ -26,28 +26,28 @@ one team can maintain two platforms and share a common technology—React.

    import {Header} from './Header'; const WelcomeScreen = () => - <View> - <Header title="Welcome to React Native"/> - <Text style={header}>Step One</Text> - <Text> - Edit App.js to change this screen and turn it - into your app. - </Text> - <Text style={header}>See Your Changes</Text> - <Text> - Press Cmd + R inside the simulator to reload - your app’s code. - </Text> - <Text style={header}>Debug</Text> - <Text> - Press Cmd + M or Shake your device to open the - React Native Debug Menu. - </Text> - <Text style={header}>Learn</Text> - <Text> - Read the docs to discover what to do next: - </Text> - </View> + <View> + <Header title="Welcome to React Native"/> + <Text style={header}>Step One</Text> + <Text> + Edit App.js to change this screen and turn it + into your app. + </Text> + <Text style={header}>See Your Changes</Text> + <Text> + Press Cmd + R inside the simulator to reload + your app’s code. + </Text> + <Text style={header}>Debug</Text> + <Text> + Press Cmd + M or Shake your device to open the + React Native Debug Menu. + </Text> + <Text style={header}>Learn</Text> + <Text> + Read the docs to discover what to do next: + </Text> + </View>

    Native Development For Everyone

    React Native lets you create truly native apps and doesn't compromise on your users' experience. It provides a core set of platform agnostic native components like View, Text, and Image diff --git a/img/language.svg b/img/language.svg old mode 100755 new mode 100644 diff --git a/index.html b/index.html index fde76656a00..715c4b04d25 100644 --- a/index.html +++ b/index.html @@ -26,28 +26,28 @@ one team can maintain two platforms and share a common technology—React.

    import {Header} from './Header'; const WelcomeScreen = () => - <View> - <Header title="Welcome to React Native"/> - <Text style={header}>Step One</Text> - <Text> - Edit App.js to change this screen and turn it - into your app. - </Text> - <Text style={header}>See Your Changes</Text> - <Text> - Press Cmd + R inside the simulator to reload - your app’s code. - </Text> - <Text style={header}>Debug</Text> - <Text> - Press Cmd + M or Shake your device to open the - React Native Debug Menu. - </Text> - <Text style={header}>Learn</Text> - <Text> - Read the docs to discover what to do next: - </Text> - </View> + <View> + <Header title="Welcome to React Native"/> + <Text style={header}>Step One</Text> + <Text> + Edit App.js to change this screen and turn it + into your app. + </Text> + <Text style={header}>See Your Changes</Text> + <Text> + Press Cmd + R inside the simulator to reload + your app’s code. + </Text> + <Text style={header}>Debug</Text> + <Text> + Press Cmd + M or Shake your device to open the + React Native Debug Menu. + </Text> + <Text style={header}>Learn</Text> + <Text> + Read the docs to discover what to do next: + </Text> + </View>

    Native Development For Everyone

    React Native lets you create truly native apps and doesn't compromise on your users' experience. It provides a core set of platform agnostic native components like View, Text, and Image diff --git a/js/codetabs.js b/js/codetabs.js old mode 100755 new mode 100644 diff --git a/js/scrollSpy.js b/js/scrollSpy.js old mode 100755 new mode 100644