react-native-website-migration · slorber · Sep 2, 2020 · Aug 19, 2020 · Aug 28, 2020 · Aug 19, 2020
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -64,7 +64,7 @@ jobs:
       - run:
           name: Check for missing index.html (build errors)
           command: |
-            if [ ! -f build/react-native/index.html ]; then
+            if [ ! -f build/index.html ]; then
               exit 1;
             fi
   # --------------------------------------------------

diff --git a/.gitignore b/.gitignore
@@ -13,5 +13,6 @@ website/i18n/*
 !website/i18n/en.json
 
 .nvmrc
+.docusaurus
 website/scripts/sync-api-docs/generatedComponentApiDocs.js
 website/scripts/sync-api-docs/extracted.json
diff --git a/docs/activityindicator.md b/docs/activityindicator.md
@@ -108,9 +108,9 @@ Whether to show the indicator (`true`) or hide it (`false`).
 
 The foreground color of the spinner.
 
-| Type            | Default                                                                                                                                                                             |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [color](colors) | `null` (system accent default color)<div class="label android">Android</div><hr/><ins style="background: #999" class="color-box"></ins>`'#999999'` <div class="label ios">iOS</div> |
+| Type            | Default                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [color](colors) | `null` (system accent default color)<div class="label android">Android</div><hr/><ins style={{background: '#999'}} className="color-box" />`'#999999'` <div className="label ios">iOS</div> |
 
 ---
 

diff --git a/docs/alertios.md b/docs/alertios.md
@@ -1,6 +1,6 @@
 ---
 id: alertios
-title: 🚧 AlertIOS
+title: '🚧 AlertIOS'
 ---
 
 > **Deprecated.** Use [`Alert`](alert) instead.

diff --git a/docs/appearance.md b/docs/appearance.md
@@ -59,17 +59,13 @@ Indicates the current user preferred color scheme. The value may be updated late
 
 Supported color schemes:
 
-| Value     | Description                                         |
-| --------- | --------------------------------------------------- |
-| `"light"` | The user prefers a light color theme.               |
-| `"dark"`  | The user prefers a dark color theme.                |
-| `null`    | The user has not indicated a preferred color theme. |
+- `light`: The user prefers a light color theme.
+- `dark`: The user prefers a dark color theme.
+- null: The user has not indicated a preferred color theme.
 
-> **Note:** `getColorScheme()` will always return `"light"` when debugging with browser.
+See also: `useColorScheme` hook.
 
-See also: [`useColorScheme`](usecolorscheme) hook.
-
----
+> Note: `getColorScheme()` will always return `light` when debugging with Chrome.
 
 ### `addChangeListener()`
 
@@ -79,8 +75,6 @@ static addChangeListener(listener)
 
 Add an event handler that is fired when appearance preferences change.
 
----
-
 ### `removeChangeListener()`
 
 ```jsx

diff --git a/docs/appregistry.md b/docs/appregistry.md
diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md
@@ -1,6 +1,6 @@
 ---
 id: asyncstorage
-title: 🚧 AsyncStorage
+title: '🚧 AsyncStorage'
 ---
 
 > **Deprecated.** Use [@react-native-community/async-storage](https://github.com/react-native-community/react-native-async-storage) instead.

diff --git a/docs/building-for-tv.md b/docs/building-for-tv.md
@@ -5,18 +5,18 @@ title: Building For TV Devices
 
 TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
 
-<div class="toggler">
+<div className="toggler">
   <ul role="tablist" id="toggle-platform">
-    <li id="android" class="button-android" aria-selected="false" role="tab" tabindex="0" aria-controls="androidtab" onclick="displayTab('platform', 'android')">
+    <li id="android" className="button-android" aria-selected="false" role="tab" tabIndex="0" aria-controls="androidtab" onClick="displayTab('platform', 'android')">
       Android
     </li>
-    <li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
+    <li id="ios" className="button-ios" aria-selected="false" role="tab" tabIndex="0" aria-controls="iostab" onClick="displayTab('platform', 'ios')">
       🚧 iOS
     </li>
   </ul>
 </div>
 
-<block class="ios" />
+<block className="ios" />
 
 > **Deprecated.** Use [react-native-tvos](https://github.com/react-native-community/react-native-tvos) instead. For the details please check the [0.62 release blog post](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos).
 
@@ -39,7 +39,7 @@ var running_on_tv = Platform.isTV;
 var running_on_apple_tv = Platform.isTVOS;
 ```
 
-<block class="android" />
+<block className="android" />
 
 ## Build changes
 
@@ -68,11 +68,11 @@ var Platform = require('Platform');
 var running_on_android_tv = Platform.isTV;
 ```
 
-<block class="ios android" />
+<block className="ios android" />
 
 ## Code changes
 
-<block class="ios" />
+<block className="ios" />
 
 - _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
 
@@ -84,23 +84,23 @@ var running_on_android_tv = Platform.isTV;
   - `onBlur` will be executed when the touchable view goes out of focus
   - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
 
-<block class="android" />
+<block className="android" />
 
 - _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will work as expected. In particular:
 
   - `onFocus` will be executed when the touchable view goes into focus
   - `onBlur` will be executed when the touchable view goes out of focus
   - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
 
-<block class="ios" />
+<block className="ios" />
 
 - _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
 
-<block class="android" />
+<block className="android"/>
 
 - _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
 
-<block class="ios android" />
+<block className="ios android"/>
 
 ```jsx
 var TVEventHandler = require('TVEventHandler');
@@ -141,18 +141,28 @@ class Game2048 extends React.Component {
   }
 ```
 
-<block class="ios" />
+<block className="ios" />
 
 - _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
 
 - _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
 
 - _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
 
-<block class="android" />
+- _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery re-rendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.
+
+<block className="android" />
 
 - _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
 
+<block className="ios" />
+
+- _Known issues_:
+
+  - [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944).
+
+<block className="android" />
+
 - _Known issues_:
 
-  - `TextInput` components do not work for now (i.e. they cannot receive focus, see [this comment](https://github.com/facebook/react-native/pull/16500#issuecomment-629285638)).
+  - `InputText` components do not work for now (i.e. they cannot receive focus).
diff --git a/docs/button.md b/docs/button.md
@@ -142,9 +142,11 @@ Text to display for blindness accessibility features.
 
 Color of the text (iOS), or background color of the button (Android).
 
-| Type            | Default                                                                                                                                                                                                                 |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [color](colors) | <ins style="background: #2196F3" class="color-box"></ins>`'#2196F3'` <div class="label android">Android</div><hr/><ins style="background: #007AFF" class="color-box"></ins>`'#007AFF'` <div class="label ios">iOS</div> |
+| Type            | Default                                                       |
+| --------------- | ------------------------------------------------------------- |
+| [color](colors) | <ins style={{background: '#2196F3'}} className="color-box" /> |
+
+`'#2196F3'` <div className="label android">Android</div><hr/><ins style={{background: '#007AFF'}} className="color-box" /> `'#007AFF'` <div className="label ios">iOS</div> |
 
 ---
 

diff --git a/docs/checkbox.md b/docs/checkbox.md
@@ -1,6 +1,6 @@
 ---
 id: checkbox
-title: 🚧 CheckBox
+title: '🚧 CheckBox'
 ---
 
 > **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead.

diff --git a/docs/clipboard.md b/docs/clipboard.md
@@ -1,6 +1,6 @@
 ---
 id: clipboard
-title: 🚧 Clipboard
+title: '🚧 Clipboard'
 ---
 
 > **Deprecated.** Use [@react-native-community/clipboard](https://github.com/react-native-community/clipboard) instead.