[docs] clean up react native api reference (#8168)

docs/common/navigation.js

@@ -153,102 +153,29 @@ const sections = [
   {
     name: 'React Native',
     reference: [
-      'Learn the Basics',
-      'Props',
-      'State',
-      'Style',
-      'Height and Width',
-      'Layout with Flexbox',
-      'Handling Text Input',
-      'Handling Touches',
-      'Using a ScrollView',
-      'Using List Views',
-      'Networking',
-      'Platform Specific Code',
-      'Navigating Between Screens',
-      'Images',
-      'Animations',
       'Accessibility',
-      'Timers',
-      'Performance',
-      'Gesture Responder System',
-      'JavaScript Environment',
-      'Direct Manipulation',
-      'Color Reference',
-      'ActivityIndicator',
-      'Button',
-      'DatePickerIOS',
-      'DrawerLayoutAndroid',
-      'FlatList',
-      'Image',
-      'InputAccessoryView',
-      'KeyboardAvoidingView',
-      'ListView',
-      'MaskedViewIOS',
-      'Modal',
-      'NavigatorIOS',
-      'Picker',
-      'PickerIOS',
-      'ProgressBarAndroid',
-      'ProgressViewIOS',
-      'RefreshControl',
-      'SafeAreaView',
-      'ScrollView',
-      'SectionList',
-      'SegmentedControlIOS',
-      'Slider',
-      'SnapshotViewIOS',
-      'StatusBar',
-      'Switch',
-      'TabBarIOS.Item',
-      'TabBarIOS',
-      'Text',
-      'TextInput',
-      'ToolbarAndroid',
-      'TouchableHighlight',
-      'TouchableNativeFeedback',
-      'TouchableOpacity',
-      'TouchableWithoutFeedback',
-      'View',
-      'ViewPagerAndroid',
-      'VirtualizedList',
-      'WebView',
-      'AccessibilityInfo',
       'ActionSheetIOS',
       'Alert',
       'AlertIOS',
       'Animated',
       'AppState',
       'AsyncStorage',
-      'BackAndroid',
       'BackHandler',
       'Clipboard',
       'DatePickerAndroid',
       'Dimensions',
       'Easing',
-      'Image Style Props',
-      'ImageStore',
       'InteractionManager',
       'Keyboard',
-      'Layout Props',
       'LayoutAnimation',
-      'ListViewDataSource',
-      'NetInfo',
       'PanResponder',
       'PixelRatio',
-      'Settings',
-      'Shadow Props',
       'Share',
-      'StatusBarIOS',
       'StyleSheet',
-      'Systrace',
-      'Text Style Props',
       'TimePickerAndroid',
       'ToastAndroid',
       'Transforms',
       'Vibration',
-      'VibrationIOS',
-      'View Style Props',
     ],
   },
 ];

docs/package.json

@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "broken-link-checker": "^0.7.8",
+    "cowsay": "^1.4.0",
     "danger": "^9.2.10",
     "http-server": "^0.11.1",
     "minimist": "^1.2.2",

docs/pages/_error.js

@@ -86,6 +86,13 @@ export default class Error extends React.Component {
       redirectPath = `/versions/latest${redirectPath}`;
     }
 
+    // If a page is missing for react-native paths we redirect to react-native docs
+    if (redirectPath.match(/\/versions\/.*\/react-native\//)) {
+      const pathParts = redirectPath.split('/');
+      const page = pathParts[pathParts.length - 2];
+      redirectPath = `https://reactnative.dev/docs/${page}`;
+    }
+
     if (redirectPath !== pathname) {
       this.setState({ redirectPath });
       return;
@@ -209,6 +216,7 @@ function pathIncludesIndexHtml(path) {
 const VERSION_PART_PATTERN = `(latest|unversioned|v\\d+\\.\\d+\.\\d+)`;
 const VERSIONED_PATH_PATTERN = `^\\/versions\\/${VERSION_PART_PATTERN}`;
 const SDK_PATH_PATTERN = `${VERSIONED_PATH_PATTERN}/sdk`;
+const REACT_NATIVE_PATH_PATTERN = `${VERSIONED_PATH_PATTERN}/react-native`;
 
 // Check if path is valid (matches /versions/some-valid-version-here/)
 function isVersionedPath(path) {
@@ -221,7 +229,7 @@ function replaceVersionWithLatest(path) {
 }
 
 function pathRequiresVersioning(path) {
-  return path.match(new RegExp(SDK_PATH_PATTERN));
+  return path.match(new RegExp(SDK_PATH_PATTERN)) || path.match(new RegExp(REACT_NATIVE_PATH_PATTERN));
 }
 
 function removeVersionFromPath(path) {

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

@@ -7,7 +7,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that
 
 Here's a small example illustrating how to use `AccessibilityInfo`:
 
-```jsx
+```js
 class AccessibilityStatusExample extends React.Component {
   state = {
     reduceMotionEnabled: false,
@@ -59,37 +59,37 @@ class AccessibilityStatusExample extends React.Component {
 
 ### `isBoldTextEnabled()`
 
-```jsx
+```js
 
 static isBoldTextEnabled()
 
 ```
 
-**iOS-Only.** Query whether a bold text is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when bold text is enabled and `false` otherwise.
+**iOS-only** Query whether a bold text is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when bold text is enabled and `false` otherwise.
 
 ### `isGrayscaleEnabled()`
 
-```jsx
+```js
 
 static isGrayscaleEnabled()
 
 ```
 
-**iOS-Only.** Query whether grayscale is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when grayscale is enabled and `false` otherwise.
+**iOS-only** Query whether grayscale is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when grayscale is enabled and `false` otherwise.
 
 ### `isInvertColorsEnabled()`
 
-```jsx
+```js
 
 static isInvertColorsEnabled()
 
 ```
 
-**iOS-Only.** Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when invert colors is enabled and `false` otherwise.
+**iOS-only** Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when invert colors is enabled and `false` otherwise.
 
 ### `isReduceMotionEnabled()`
 
-```jsx
+```js
 
 static isReduceMotionEnabled()
 
@@ -99,17 +99,17 @@ Query whether reduce motion is currently enabled. Returns a promise which resolv
 
 ### `isReduceTransparencyEnabled()`
 
-```jsx
+```js
 
 static isReduceTransparencyEnabled()
 
 ```
 
-**iOS-Only.** Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a reduce transparency is enabled and `false` otherwise.
+**iOS-only** Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a reduce transparency is enabled and `false` otherwise.
 
 ### `isScreenReaderEnabled()`
 
-```jsx
+```js
 
 static isScreenReaderEnabled()
 
@@ -121,29 +121,29 @@ Query whether a screen reader is currently enabled. Returns a promise which reso
 
 ### `addEventListener()`
 
-```jsx
+```js
 
 static addEventListener(eventName, handler)
 
 ```
 
 Add an event handler. Supported events:
 
-- `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes. The argument to the event handler is a boolean. The boolean is `true` when bold text is enabled and `false` otherwise.
-- `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a gray scale is enabled and `false` otherwise.
-- `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle changes. The argument to the event handler is a boolean. The boolean is `true` when invert colors is enabled and `false` otherwise.
+- `boldTextChanged`: **iOS-only** event. Fires when the state of the bold text toggle changes. The argument to the event handler is a boolean. The boolean is `true` when bold text is enabled and `false` otherwise.
+- `grayscaleChanged`: **iOS-only** event. Fires when the state of the gray scale toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a gray scale is enabled and `false` otherwise.
+- `invertColorsChanged`: **iOS-only** event. Fires when the state of the invert colors toggle changes. The argument to the event handler is a boolean. The boolean is `true` when invert colors is enabled and `false` otherwise.
 - `reduceMotionChanged`: Fires when the state of the reduce motion toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a reduce motion is enabled (or when "Transition Animation Scale" in "Developer options" is "Animation off") and `false` otherwise.
 - `screenReaderChanged`: Fires when the state of the screen reader changes. The argument to the event handler is a boolean. The boolean is `true` when a screen reader is enabled and `false` otherwise.
-- `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency toggle changes. The argument to the event handler is a boolean. The boolean is `true` when reduce transparency is enabled and `false` otherwise.
-- `announcementFinished`: iOS-only event. Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:
+- `reduceTransparencyChanged`: **iOS-only** event. Fires when the state of the reduce transparency toggle changes. The argument to the event handler is a boolean. The boolean is `true` when reduce transparency is enabled and `false` otherwise.
+- `announcementFinished`: **iOS-only** event. Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:
   - `announcement`: The string announced by the screen reader.
   - `success`: A boolean indicating whether the announcement was successfully made.
 
 ---
 
 ### `setAccessibilityFocus()`
 
-```jsx
+```js
 
 static setAccessibilityFocus(reactTag)
 
@@ -155,7 +155,7 @@ Set accessibility focus to a React component. On Android, this is equivalent to
 
 ### `announceForAccessibility()`
 
-```jsx
+```js
 
 static announceForAccessibility(announcement)
 
@@ -167,7 +167,7 @@ Post a string to be announced by the screen reader.
 
 ### `removeEventListener()`
 
-```jsx
+```js
 
 static removeEventListener(eventName, handler)
 

docs/pages/versions/unversioned/react-native/actionsheetios.md

@@ -9,7 +9,7 @@ title: ActionSheetIOS
 
 ### `showActionSheetWithOptions()`
 
-```jsx
+```js
 
 static showActionSheetWithOptions(options, callback)
 
@@ -29,7 +29,7 @@ The 'callback' function takes one parameter, the zero-based index of the selecte
 
 Minimal example:
 
-```jsx
+```js
 ActionSheetIOS.showActionSheetWithOptions(
   {
     options: ['Cancel', 'Remove'],
@@ -48,7 +48,7 @@ ActionSheetIOS.showActionSheetWithOptions(
 
 ### `showShareActionSheetWithOptions()`
 
-```jsx
+```js
 
 static showShareActionSheetWithOptions(options, failureCallback, successCallback)