add CheckBox page back to the sidebar, add Snack example (#1786)

* add CheckBox page back to the sidebar, add Snack example

* add deprecation notice to Checkbox, add deprecated version of the page to 0.61 docs

docs/checkbox.md

@@ -1,33 +1,70 @@
 ---
 id: checkbox
-title: CheckBox
+title: 🚧 CheckBox
 ---
 
+> **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead.
+
 Renders a boolean input (Android only).
 
 This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions.
 
-@keyword checkbox @keyword toggle
-
-### Props
-
-- [View props...](view#props)
-
-* [`disabled`](checkbox#disabled)
-* [`onChange`](checkbox#onchange)
-* [`onValueChange`](checkbox#onvaluechange)
-* [`testID`](checkbox#testid)
-* [`value`](checkbox#value)
+## Example
+
+```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web
+import React, { useState } from "react";
+import { CheckBox, Text, StyleSheet, View } from "react-native";
+
+export default App = () => {
+  const [isSelected, setSelection] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.checkboxContainer}>
+        <CheckBox
+          value={isSelected}
+          onValueChange={setSelection}
+          style={styles.checkbox}
+        />
+        <Text style={styles.label}>Do you like React Native?</Text>
+      </View>
+      <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  checkboxContainer: {
+    flexDirection: "row",
+    marginBottom: 20,
+  },
+  checkbox: {
+    alignSelf: "center",
+  },
+  label: {
+    margin: 8,
+  },
+});
+```
 
 ---
 
 # Reference
 
 ## Props
 
+Inherits [View Props](view#props).
+
+---
+
 ### `disabled`
 
-If true the user won't be able to toggle the checkbox. Default value is false.
+If true the user won't be able to toggle the checkbox. Default value is `false`.
 
 | Type | Required |
 | ---- | -------- |
@@ -67,7 +104,7 @@ Used to locate this view in end-to-end tests.
 
 ### `value`
 
-The value of the checkbox. If true the checkbox will be turned on. Default value is false.
+The value of the checkbox. If true the checkbox will be turned on. Default value is `false`.
 
 | Type | Required |
 | ---- | -------- |

website/i18n/en.json

@@ -60,7 +60,7 @@
         "title": "Button"
       },
       "checkbox": {
-        "title": "CheckBox"
+        "title": "🚧 CheckBox"
       },
       "clipboard": {
         "title": "🚧 Clipboard"
@@ -3428,6 +3428,9 @@
       "version-0.61/version-0.61-asyncstorage": {
         "title": "🚧 AsyncStorage"
       },
+      "version-0.61/version-0.61-checkbox": {
+        "title": "🚧 CheckBox"
+      },
       "version-0.61/version-0.61-clipboard": {
         "title": "🚧 Clipboard"
       },

website/versioned_docs/version-0.61/checkbox.md

@@ -0,0 +1,112 @@
+---
+id: version-0.61-checkbox
+title: 🚧 CheckBox
+original_id: checkbox
+---
+
+> **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead.
+
+Renders a boolean input (Android only).
+
+This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions.
+
+## Example
+
+```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web
+import React, { useState } from "react";
+import { CheckBox, Text, StyleSheet, View } from "react-native";
+
+export default App = () => {
+  const [isSelected, setSelection] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.checkboxContainer}>
+        <CheckBox
+          value={isSelected}
+          onValueChange={setSelection}
+          style={styles.checkbox}
+        />
+        <Text style={styles.label}>Do you like React Native?</Text>
+      </View>
+      <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  checkboxContainer: {
+    flexDirection: "row",
+    marginBottom: 20,
+  },
+  checkbox: {
+    alignSelf: "center",
+  },
+  label: {
+    margin: 8,
+  },
+});
+```
+
+---
+
+# Reference
+
+## Props
+
+Inherits [View Props](view#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the checkbox. Default value is `false`.
+
+| Type | Required |
+| ---- | -------- |
+| bool | No       |
+
+---
+
+### `onChange`
+
+Used in case the props change removes the component.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onValueChange`
+
+Invoked with the new value when the value changes.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   | Required |
+| ------ | -------- |
+| string | No       |
+
+---
+
+### `value`
+
+The value of the checkbox. If true the checkbox will be turned on. Default value is `false`.
+
+| Type | Required |
+| ---- | -------- |
+| bool | No       |

website/versioned_docs/version-0.62/checkbox.md

@@ -1,34 +1,71 @@
 ---
 id: version-0.62-checkbox
-title: CheckBox
+title: 🚧 CheckBox
 original_id: checkbox
 ---
 
+> **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead.
+
 Renders a boolean input (Android only).
 
 This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions.
 
-@keyword checkbox @keyword toggle
-
-### Props
-
-- [View props...](view#props)
-
-* [`disabled`](checkbox#disabled)
-* [`onChange`](checkbox#onchange)
-* [`onValueChange`](checkbox#onvaluechange)
-* [`testID`](checkbox#testid)
-* [`value`](checkbox#value)
+## Example
+
+```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web
+import React, { useState } from "react";
+import { CheckBox, Text, StyleSheet, View } from "react-native";
+
+export default App = () => {
+  const [isSelected, setSelection] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.checkboxContainer}>
+        <CheckBox
+          value={isSelected}
+          onValueChange={setSelection}
+          style={styles.checkbox}
+        />
+        <Text style={styles.label}>Do you like React Native?</Text>
+      </View>
+      <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  checkboxContainer: {
+    flexDirection: "row",
+    marginBottom: 20,
+  },
+  checkbox: {
+    alignSelf: "center",
+  },
+  label: {
+    margin: 8,
+  },
+});
+```
 
 ---
 
 # Reference
 
 ## Props
 
+Inherits [View Props](view#props).
+
+---
+
 ### `disabled`
 
-If true the user won't be able to toggle the checkbox. Default value is false.
+If true the user won't be able to toggle the checkbox. Default value is `false`.
 
 | Type | Required |
 | ---- | -------- |
@@ -68,7 +105,7 @@ Used to locate this view in end-to-end tests.
 
 ### `value`
 
-The value of the checkbox. If true the checkbox will be turned on. Default value is false.
+The value of the checkbox. If true the checkbox will be turned on. Default value is `false`.
 
 | Type | Required |
 | ---- | -------- |

website/versioned_sidebars/version-0.61-sidebars.json

@@ -62,6 +62,7 @@
     "Components": [
       "version-0.61-activityindicator",
       "version-0.61-button",
+      "version-0.61-checkbox",
       "version-0.61-datepickerios",
       "version-0.61-drawerlayoutandroid",
       "version-0.61-flatlist",