Fix docs (wrong formatting, RN v0.57 update) (expo#3273)

* Handle specific code blocks in flatlist and picker properly

* Run `npm run import-react-native-docs`

* Update react-native-website submodule

* Copy RN docs from unversioned (updated to v0.57) to v31

* Fixed layoutanimation compilation

docs/mdjs/generate-page.js

@@ -58,6 +58,13 @@ const generateJsPage = (filePath, filename) => {
   // generate HTML from the markdown tables, and inline that into the markdown
   markdown = replaceTables(markdown);
 
+  // NOTE(2018/11/10): react-native/layoutanimation.md has some particular 
+  // code span inside a table which breaks the compilation.
+  if (filename === 'layoutanimation') {
+    markdown = markdown.replace(/<td><code>/g, '`');
+    markdown = markdown.replace(/<\/code><\/td>/g, '`');
+  }
+
   // remove comments
   markdown = markdown.replace(/<!--(.|\n)*?-->/g, '');
 

docs/scripts/import-react-native-docs.js

@@ -159,26 +159,32 @@ let mainAsync = async () => {
       if (basename === 'flatlist.md') {
         if (/Minimal /.test(l)) {
           l = l + '\n\n```javascript';
+          inCodeBlock = true;
         }
         if (/More complex, multi-select example/.test(l)) {
           l = '```\n\n' + l;
+          inCodeBlock = false;
         }
 
         if (/class MyListItem extends/.test(l)) {
           l = '```javascript\n' + l;
+          inCodeBlock = true;
         }
 
         if (/This is a convenience wrapper/.test(l)) {
           l = '```\n\n' + l;
+          inCodeBlock = false;
         }
       }
 
       if (basename === 'picker.md') {
         if (/    <Picker$/.test(l)) {
           l = '\n```javascript\n\n' + l;
+          inCodeBlock = true;
         }
         if (/    <\/Picker>/.test(l)) {
           l = l + '\n\n```\n';
+          inCodeBlock = false;
         }
       }
 

docs/versions/unversioned/react-native/accessibility.md

@@ -103,7 +103,7 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A
 * **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
 * **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
 
-#### accessibilityState (iOS, Android)
+#### accessibilityStates (iOS, Android)
 
 > **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.
 
@@ -112,7 +112,7 @@ Accessibility State tells a person using either VoiceOver on iOS or TalkBack on
 * **selected** Used when the element is in a selected state. For example, a button is selected.
 * **disabled** Used when the element is disabled and cannot be interacted with.
 
-To use, set the `accessibilityState` to an array containing either `selected`, `disabled`, or both.
+To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.
 
 #### accessibilityTraits (iOS)
 

docs/versions/unversioned/react-native/accessibilityinfo.md

@@ -18,7 +18,7 @@ class ScreenReaderStatusExample extends React.Component {
   componentDidMount() {
     AccessibilityInfo.addEventListener(
       'change',
-      this._handleScreenReaderToggled
+      this._handleScreenReaderToggled,
     );
     AccessibilityInfo.fetch().then((isEnabled) => {
       this.setState({
@@ -30,7 +30,7 @@ class ScreenReaderStatusExample extends React.Component {
   componentWillUnmount() {
     AccessibilityInfo.removeEventListener(
       'change',
-      this._handleScreenReaderToggled
+      this._handleScreenReaderToggled,
     );
   }
 

docs/versions/unversioned/react-native/alertios.md

@@ -90,7 +90,7 @@ AlertIOS.alert(
       text: 'Install',
       onPress: () => console.log('Install Pressed'),
     },
-  ]
+  ],
 );
 
 ```
@@ -140,7 +140,7 @@ AlertIOS.prompt(
       onPress: (password) => console.log('OK Pressed, password: ' + password),
     },
   ],
-  'secure-text'
+  'secure-text',
 );
 
 ```
@@ -158,7 +158,7 @@ AlertIOS.prompt(
   null,
   (text) => console.log('Your username is ' + text),
   null,
-  'default'
+  'default',
 );
 
 ```

docs/versions/unversioned/react-native/animated.md

@@ -15,7 +15,7 @@ Animated.timing(
   this.state.fadeAnim, // The value to drive
   {
     toValue: 1, // Animate to final value of 1
-  }
+  },
 ).start(); // Start the animation
 
 ```

docs/versions/unversioned/react-native/animations.md

@@ -338,7 +338,7 @@ The native driver also works with `Animated.event`. This is especially useful fo
         },
       },
     ],
-    {useNativeDriver: true} // <-- Add this
+    {useNativeDriver: true}, // <-- Add this
   )}>
   {content}
 </Animated.ScrollView>

docs/versions/unversioned/react-native/asyncstorage.md

@@ -49,9 +49,9 @@ _retrieveData = async () => {
       // We have data!!
       console.log(value);
     }
-   } catch (error) {
-     // Error retrieving data
-   }
+  } catch (error) {
+    // Error retrieving data
+  }
 }
 
 ```

docs/versions/unversioned/react-native/datepickerandroid.md

@@ -60,7 +60,7 @@ The available keys for the `options` object are:
   * 'spinner': Show a date picker in spinner mode.
   * 'default': Show a default native date picker(spinner/calendar) based on android versions.
 
-Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values.
+Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` is equal to `DatePickerAndroid.dateSetAction` before reading the values.
 
 Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options.
 

docs/versions/unversioned/react-native/easing.md

@@ -292,7 +292,7 @@ A useful tool to visualize cubic bezier curves can be found at http://cubic-bezi
 
 ```javascript
 
-static in(easing)
+static in easing;
 
 ```
 

docs/versions/unversioned/react-native/flatlist.md

@@ -22,8 +22,8 @@ Minimal Example:
 ```javascript
 
     <FlatList
-      data=${"{"}[${"{"}key: 'a'${"}"}, ${"{"}key: 'b'${"}"}]${"}"}
-      renderItem=${"{"}(${"{"}item${"}"}) => <Text>${"{"}item.key${"}"}</Text>${"}"}
+      data={[{key: 'a'}, {key: 'b'}]}
+      renderItem={({item}) => <Text>{item.key}</Text>}
     />
 
 ```
@@ -37,59 +37,59 @@ More complex, multi-select example demonstrating `PureComponent` usage for perf
 
 ```javascript
     class MyListItem extends React.PureComponent ${"{"}
-      _onPress = () => ${"{"}
+      _onPress = () => {
         this.props.onPressItem(this.props.id);
-      ${"}"};
+      };
 
-      render() ${"{"}
+      render() {
         const textColor = this.props.selected ? "red" : "black";
         return (
-          <TouchableOpacity onPress=${"{"}this._onPress${"}"}>
+          <TouchableOpacity onPress={this._onPress}>
             <View>
-              <Text style=${"{"}${"{"} color: textColor ${"}"}${"}"}>
-                ${"{"}this.props.title${"}"}
+              <Text style={{ color: textColor }}>
+                {this.props.title}
               </Text>
             </View>
           </TouchableOpacity>
         );
-      ${"}"}
-    ${"}"}
+      }
+    }
 
-    class MultiSelectList extends React.PureComponent ${"{"}
-      state = ${"{"}selected: (new Map(): Map<string, boolean>)${"}"};
+    class MultiSelectList extends React.PureComponent {
+      state = {selected: (new Map(): Map<string, boolean>)};
 
       _keyExtractor = (item, index) => item.id;
 
-      _onPressItem = (id: string) => ${"{"}
+      _onPressItem = (id: string) => {
         // updater functions are preferred for transactional updates
-        this.setState((state) => ${"{"}
+        this.setState((state) => {
           // copy the map rather than modifying state.
           const selected = new Map(state.selected);
           selected.set(id, !selected.get(id)); // toggle
-          return ${"{"}selected${"}"};
-        ${"}"});
-      ${"}"};
+          return {selected};
+        });
+      };
 
-      _renderItem = (${"{"}item${"}"}) => (
+      _renderItem = ({item}) => (
         <MyListItem
-          id=${"{"}item.id${"}"}
-          onPressItem=${"{"}this._onPressItem${"}"}
-          selected=${"{"}!!this.state.selected.get(item.id)${"}"}
-          title=${"{"}item.title${"}"}
+          id={item.id}
+          onPressItem={this._onPressItem}
+          selected={!!this.state.selected.get(item.id)}
+          title={item.title}
         />
       );
 
-      render() ${"{"}
+      render() {
         return (
           <FlatList
-            data=${"{"}this.props.data${"}"}
-            extraData=${"{"}this.state${"}"}
-            keyExtractor=${"{"}this._keyExtractor${"}"}
-            renderItem=${"{"}this._renderItem${"}"}
+            data={this.props.data}
+            extraData={this.state}
+            keyExtractor={this._keyExtractor}
+            renderItem={this._renderItem}
           />
         );
-      ${"}"}
-    ${"}"}
+      }
+    }
 
 ```
 

docs/versions/unversioned/react-native/height-and-width.md

@@ -37,7 +37,7 @@ Setting dimensions this way is common for components that should always render a
 
 ## Flex Dimensions
 
-Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings.
+Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings.
 
 > A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible.
 

docs/versions/unversioned/react-native/imagebackground.md

@@ -0,0 +1,58 @@
+---
+id: imagebackground
+title: ImageBackground
+---
+
+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 very simple. Refer to `<ImageBackground>`'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.
+
+Note that you must specify some width and height style attributes.
+
+## Example
+
+
+```javascript
+
+return (
+  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
+    <Text>Inside</Text>
+  </ImageBackground>
+);
+
+```
+
+
+### Props
+
+* [`Image` props...](image.md#props)
+* [`style`](imagebackground.md#style)
+* [`imageStyle`](imagebackground.md#imageStyle)
+* [`imageRef`](imagebackground.md#imageRef)
+
+---
+
+# Reference
+
+## Props
+
+### `style`
+
+| Type                               | Required |
+| ---------------------------------- | -------- |
+| [view styles](view-style-props.md) | No       |
+
+### `imageStyle`
+
+| Type                                 | Required |
+| ------------------------------------ | -------- |
+| [image styles](image-style-props.md) | No       |
+
+### `imageRef`
+
+Allows to set a reference to the inner `Image` component
+
+| Type                                                  | Required |
+| ----------------------------------------------------- | -------- |
+| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | No       |
+

docs/versions/unversioned/react-native/images.md

@@ -25,6 +25,7 @@ You can also use the `@2x` and `@3x` suffixes to provide images for different sc
 .
 ├── button.js
 └── img
+    ├── check.png
     ├── check@2x.png
     └── check@3x.png
 
@@ -243,7 +244,7 @@ On the user side, this lets you annotate the object with useful attributes such
 
 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 very simple. Refer to `<ImageBackground>`'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.
+You might not want to use `<ImageBackground>` in some cases, since the implementation is very simple. Refer to `<ImageBackground>`'s [documentation](imagebackground.md) for more insight, and create your own custom component when needed.
 
 
 ```javascript